Gh-2437 - Updating share board modal (#2511)

* Gh-2437 - Updating share board modal

* Updating test

* Updating card dialog and test

* Updating comment list

webapp/src/components/__snapshots__/cardDialog.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/cardDialog already following card 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back cardDialog"
   >
     <div
       class="wrapper"
@@ -281,7 +281,7 @@ exports[`components/cardDialog already following card 1`] = `
 exports[`components/cardDialog return a cardDialog readonly 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back cardDialog"
   >
     <div
       class="wrapper"
@@ -388,7 +388,7 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
 exports[`components/cardDialog return cardDialog menu content 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back cardDialog"
   >
     <div
       class="wrapper"
@@ -753,7 +753,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
 exports[`components/cardDialog return cardDialog menu content and cancel delete confirmation do nothing 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back cardDialog"
   >
     <div
       class="wrapper"
@@ -1031,7 +1031,7 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
 exports[`components/cardDialog should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back cardDialog"
   >
     <div
       class="wrapper"

webapp/src/components/cardDetail/commentsList.scss

@@ -23,6 +23,7 @@
     .newcomment {
         flex-grow: 1;
         margin: 0 0 0 8px;
+        overflow: hidden;
 
         + button {
             margin: -4px 0 0 8px;

webapp/src/components/cardDialog.scss

@@ -1,3 +1,14 @@
+.Dialog {
+    &.cardDialog {
+        .dialog {
+            @media not screen and (max-width: 975px) {
+                width: 800px;
+                max-width: 100%;
+            }
+        }
+    }
+}
+
 .cardFollowBtn {
     float: right;
     height: 100%;

webapp/src/components/cardDialog.tsx

@@ -166,6 +166,7 @@ const CardDialog = (props: Props): JSX.Element => {
     return (
         <>
             <Dialog
+                className='cardDialog'
                 onClose={props.onClose}
                 toolsMenu={!props.readonly && menu}
                 toolbar={!isTemplate && Utils.isFocalboardPlugin() && toolbar}

webapp/src/components/dialog.scss

@@ -18,6 +18,13 @@
         justify-content: center;
     }
 
+    .toolbar {
+        display: flex;
+        flex-direction: row;
+        padding: 16px;
+        justify-content: space-between;
+    }
+
     .dialog {
         display: flex;
         flex-direction: column;
@@ -63,13 +70,6 @@
             background-color: rgba(230, 192, 192, 0.9);
         }
 
-        > .toolbar {
-            display: flex;
-            flex-direction: row;
-            padding: 16px;
-            justify-content: space-between;
-        }
-
         > .content {
             display: flex;
             flex-direction: column;

webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap

@@ -15,11 +15,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -116,11 +111,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -217,11 +207,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -341,11 +326,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -465,11 +445,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -589,11 +564,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -690,11 +660,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -791,11 +756,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"
@@ -892,11 +852,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
         <div
           class="toolbar"
         >
-          <h1
-            class="text-heading5 mt-2"
-          >
-             
-          </h1>
           <button
             aria-label="Close dialog"
             title="Close dialog"

webapp/src/components/shareBoard/shareBoard.scss

@@ -1,14 +1,26 @@
 .ShareBoardDialog {
     .dialog {
-        @media not screen and (max-width: 975px) {
+        width: 600px;
-            max-width: 600px;
+        max-width: 90%;
-            height: auto;
+        height: auto;
+        position: relative;
+    }
+
+    .toolbar {
+        padding: 0;
+
+        button {
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            z-index: 5;
         }
     }
 
     .tabs-container {
         display: flex;
-        margin: -48px 24px 0;
+        padding: 24px 0 0;
+        margin: 0 24px;
         border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
 
         .tab-item {
@@ -90,7 +102,7 @@
                 margin: 4px;
                 font-size: 18px;
             }
-            
+
             .icon-content-copy {
                 margin-right: 4px;
                 font-size: 18px;

webapp/src/components/shareBoard/shareBoard.tsx

@@ -117,7 +117,6 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
         <Dialog
             onClose={props.onClose}
             className='ShareBoardDialog'
-            title={' '}
         >
             {props.enableSharedBoards && (
                 <div className='tabs-container'>