[GH-1053] Fix table horizontal lines (#1054)

* Set width to fit content for table header and row container.

* Horizontal line for table footer fixed:
  use div wrapper to make the width of the footer equal to the width of header and rows.

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

webapp/src/components/gallery/gallery.tsx

@@ -53,7 +53,7 @@ const Gallery = (props: Props): JSX.Element => {
     const visibleTitle = activeView.fields.visiblePropertyIds.includes(Constants.titleColumnId)
 
     return (
-        <div className='octo-table-body Gallery'>
+        <div className='Gallery'>
             {cards.filter((c) => c.parentId === board.id).map((card) => {
                 return (
                     <GalleryCard

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

@@ -3,7 +3,10 @@
 exports[`components/table/Table extended should match snapshot with CreatedBy 1`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -387,13 +390,17 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`components/table/Table extended should match snapshot with CreatedBy 2`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -777,13 +784,17 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`components/table/Table extended should match snapshot with UpdatedAt 1`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -1167,13 +1178,17 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`components/table/Table extended should match snapshot with UpdatedBy 1`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -1557,13 +1572,17 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`components/table/Table should match snapshot 1`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -1805,13 +1824,17 @@ exports[`components/table/Table should match snapshot 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`components/table/Table should match snapshot with GroupBy 1`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -2025,13 +2048,17 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`components/table/Table should match snapshot, read-only 1`] = `
 <div>
   <div
-    class="octo-table-body Table"
+    class="Table"
+  >
+    <div
+      class="octo-table-body"
     >
       <div
         class="octo-table-header"
@@ -2246,5 +2273,6 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;

webapp/src/components/table/table.scss

@@ -1,5 +1,9 @@
 .Table {
+    margin-top: 16px;
     padding-bottom: 0 !important;
+    overflow: auto;
+    position: relative;
+    flex: 1;
 
     .octo-group-header-cell {
         display: flex;
@@ -124,7 +128,6 @@
 
         .Editable {
             padding: 0 5px;
-            display: relative;
             left: -5px;
         }
 
@@ -150,13 +153,10 @@
         }
     }
 
-    &.octo-table-body {
+    .octo-table-body {
-        margin-top: 16px;
         display: flex;
-        flex: 1;
         flex-direction: column;
-        overflow: auto;
+        width: fit-content;
-        position: relative;
     }
 
     .octo-table-header,
@@ -175,6 +175,7 @@
         top: -2px;
         z-index: 1;
         background: rgb(var(--center-channel-bg-rgb));
+        width: fit-content;
 
         .octo-table-cell {
             color: rgba(var(--center-channel-color-rgb), 0.6);
@@ -186,13 +187,15 @@
         }
     }
 
+    .table-row-container {
+        width: fit-content;
+    }
+
     .octo-table-footer {
         .octo-table-cell {
             color: rgba(var(--center-channel-color-rgb), 0.6);
             cursor: pointer;
-
             width: 100%;
-            border-right: none;
             padding-left: 15px;
 
             &:hover {

webapp/src/components/table/table.tsx

@@ -273,11 +273,11 @@ const Table = (props: Props): JSX.Element => {
 
     return (
         <div
-            className='octo-table-body Table'
+            className='Table'
             ref={drop}
         >
+            <div className='octo-table-body'>
                 {/* Headers */}
-
                 <div
                     className='octo-table-header'
                     id='mainBoardHeader'
@@ -399,6 +399,7 @@ const Table = (props: Props): JSX.Element => {
                     offset={offset}
                 />
             </div>
+        </div>
     )
 }