From f918ac9cecae3b6a1b28cdbb2a2568aaf77d9e17 Mon Sep 17 00:00:00 2001
From: Konrad Ryczko <konradryczko1@gmail.com>
Date: Wed, 6 Sep 2023 20:44:09 +0200
Subject: [PATCH] Fix/Coping URL

---
 .../ShareSurveryModal/ShareSurveyModal.tsx    | 24 ++++---------------
 .../components/StyledDialog/StyledDialog.tsx  |  4 ++--
 2 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx b/src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx
index e8f27be1..82a4dd52 100644
--- a/src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx
+++ b/src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx
@@ -1,5 +1,5 @@
 import { LinkIcon } from '@heroicons/react/outline';
-import React, { useCallback, useRef } from 'react';
+import React from 'react';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
 import useTranslation from 'next-translate/useTranslation';
@@ -18,40 +18,24 @@ export default function ShareSurveyModal({
 }: ShareSurveyModalProps) {
   const { t } = useTranslation('common');
   const { copy } = useCopyToClipboard();
-  const inputEl = useRef<HTMLInputElement>(null);
 
   const link = `${window.location.protocol}//${window.location.host}/survey/${surveyId}`;
 
   const handleCopy = () => {
     copy(link);
-
-    if (inputEl.current) {
-      inputEl.current.select();
-    }
   };
 
-  const handleInputFocus = useCallback(
-    (e: React.FocusEvent<HTMLInputElement>) => {
-      e.target.select();
-    },
-    []
-  );
-
   return (
     <StyledDialog
       isOpen={isOpened}
       onClose={closeModal}
       title={t('shareSurveyModal.title')}
-      contentClassName="!w-[800px]"
       content={
         <>
           <div className="mt-4">
-            <input
-              onFocus={handleInputFocus}
-              ref={inputEl}
-              className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none"
-              value={`${link}`}
-            />
+            <span className="block w-full select-all break-words rounded-md border border-gray-300 px-3 py-2 text-center text-sm focus:outline-none">
+              {link}
+            </span>
           </div>
 
           <div className="mt-4 flex flex-col-reverse justify-between gap-2 sm:flex-row">
diff --git a/src/shared/components/StyledDialog/StyledDialog.tsx b/src/shared/components/StyledDialog/StyledDialog.tsx
index a74b7b5e..57c132e1 100644
--- a/src/shared/components/StyledDialog/StyledDialog.tsx
+++ b/src/shared/components/StyledDialog/StyledDialog.tsx
@@ -17,7 +17,7 @@ export default function StyledDialog({
   isOpen,
   onClose,
   contentClassName = '',
-  centerTitle = false,
+  centerTitle = true,
 }: StyledDialogProps) {
   return (
     <Transition appear show={isOpen} as={Fragment}>
@@ -47,7 +47,7 @@ export default function StyledDialog({
             >
               <Dialog.Panel
                 className={clsx(
-                  'flex w-auto max-w-md flex-col justify-center overflow-hidden rounded-md bg-white p-6 text-left shadow-xl transition-all',
+                  'flex w-auto max-w-lg flex-col justify-center overflow-hidden rounded-md bg-white p-6 text-left shadow-xl transition-all',
                   contentClassName
                 )}
               >