[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/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,110 +273,110 @@ const Table = (props: Props): JSX.Element => {
 
     return (
         <div
-            className='octo-table-body Table'
+            className='Table'
             ref={drop}
         >
-            {/* Headers */}
+            <div className='octo-table-body'>
+                {/* Headers */}
+                <div
+                    className='octo-table-header'
+                    id='mainBoardHeader'
+                >
+                    <TableHeader
+                        name={
+                            <FormattedMessage
+                                id='TableComponent.name'
+                                defaultMessage='Name'
+                            />
+                        }
+                        sorted={titleSorted}
+                        readonly={props.readonly}
+                        board={board}
+                        activeView={activeView}
+                        cards={cards}
+                        views={views}
+                        template={{id: Constants.titleColumnId, name: 'title', type: 'text', options: []}}
+                        offset={resizingColumn === Constants.titleColumnId ? offset : 0}
+                        onDrop={onDropToColumn}
+                        onAutoSizeColumn={onAutoSizeColumn}
+                    />
 
-            <div
+                    {/* Table header row */}
-                className='octo-table-header'
-                id='mainBoardHeader'
-            >
-                <TableHeader
-                    name={
-                        <FormattedMessage
-                            id='TableComponent.name'
-                            defaultMessage='Name'
-                        />
-                    }
-                    sorted={titleSorted}
-                    readonly={props.readonly}
-                    board={board}
-                    activeView={activeView}
-                    cards={cards}
-                    views={views}
-                    template={{id: Constants.titleColumnId, name: 'title', type: 'text', options: []}}
-                    offset={resizingColumn === Constants.titleColumnId ? offset : 0}
-                    onDrop={onDropToColumn}
-                    onAutoSizeColumn={onAutoSizeColumn}
-                />
 
-                {/* Table header row */}
+                    {board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id)).map((template: IPropertyTemplate) => {
+                        let sorted: 'up' | 'down' | 'none' = 'none'
+                        const sortOption = activeView.fields.sortOptions.find((o: ISortOption) => o.propertyId === template.id)
+                        if (sortOption) {
+                            sorted = sortOption.reversed ? 'down' : 'up'
+                        }
 
-                {board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id)).map((template: IPropertyTemplate) => {
+                        return (
-                    let sorted: 'up' | 'down' | 'none' = 'none'
+                            <TableHeader
-                    const sortOption = activeView.fields.sortOptions.find((o: ISortOption) => o.propertyId === template.id)
+                                name={template.name}
-                    if (sortOption) {
+                                sorted={sorted}
-                        sorted = sortOption.reversed ? 'down' : 'up'
+                                readonly={props.readonly}
+                                board={board}
+                                activeView={activeView}
+                                cards={cards}
+                                views={views}
+                                template={template}
+                                key={template.id}
+                                offset={resizingColumn === template.id ? offset : 0}
+                                onDrop={onDropToColumn}
+                                onAutoSizeColumn={onAutoSizeColumn}
+                            />
+                        )
+                    })}
+                </div>
+
+                {/* Table rows */}
+                <div className='table-row-container'>
+                    {activeView.fields.groupById &&
+                    visibleGroups.map((group) => {
+                        return (
+                            <TableGroup
+                                key={group.option.id}
+                                board={board}
+                                activeView={activeView}
+                                groupByProperty={groupByProperty}
+                                group={group}
+                                readonly={props.readonly}
+                                columnRefs={columnRefs}
+                                selectedCardIds={props.selectedCardIds}
+                                cardIdToFocusOnRender={props.cardIdToFocusOnRender}
+                                hideGroup={hideGroup}
+                                addCard={props.addCard}
+                                showCard={props.showCard}
+                                propertyNameChanged={propertyNameChanged}
+                                onCardClicked={props.onCardClicked}
+                                onDropToGroupHeader={onDropToGroupHeader}
+                                onDropToCard={onDropToCard}
+                                onDropToGroup={onDropToGroup}
+                            />)
+                    })
                     }
 
-                    return (
+                    {/* No Grouping, Rows, one per card */}
-                        <TableHeader
+                    {!activeView.fields.groupById &&
-                            name={template.name}
+                    <TableRows
-                            sorted={sorted}
+                        board={board}
-                            readonly={props.readonly}
+                        activeView={activeView}
-                            board={board}
+                        columnRefs={columnRefs}
-                            activeView={activeView}
+                        cards={cards}
-                            cards={cards}
+                        selectedCardIds={props.selectedCardIds}
-                            views={views}
+                        readonly={props.readonly}
-                            template={template}
+                        cardIdToFocusOnRender={props.cardIdToFocusOnRender}
-                            key={template.id}
+                        showCard={props.showCard}
-                            offset={resizingColumn === template.id ? offset : 0}
+                        addCard={props.addCard}
-                            onDrop={onDropToColumn}
+                        onCardClicked={props.onCardClicked}
-                            onAutoSizeColumn={onAutoSizeColumn}
+                        onDrop={onDropToCard}
-                        />
+                    />
-                    )
+                    }
-                })}
+                </div>
-            </div>
 
-            {/* Table rows */}
+                {/* Add New row */}
-            <div className='table-row-container'>
+                <div className='octo-table-footer'>
-                {activeView.fields.groupById &&
+                    {!props.readonly && !activeView.fields.groupById &&
-                visibleGroups.map((group) => {
-                    return (
-                        <TableGroup
-                            key={group.option.id}
-                            board={board}
-                            activeView={activeView}
-                            groupByProperty={groupByProperty}
-                            group={group}
-                            readonly={props.readonly}
-                            columnRefs={columnRefs}
-                            selectedCardIds={props.selectedCardIds}
-                            cardIdToFocusOnRender={props.cardIdToFocusOnRender}
-                            hideGroup={hideGroup}
-                            addCard={props.addCard}
-                            showCard={props.showCard}
-                            propertyNameChanged={propertyNameChanged}
-                            onCardClicked={props.onCardClicked}
-                            onDropToGroupHeader={onDropToGroupHeader}
-                            onDropToCard={onDropToCard}
-                            onDropToGroup={onDropToGroup}
-                        />)
-                })
-                }
-
-                {/* No Grouping, Rows, one per card */}
-                {!activeView.fields.groupById &&
-                <TableRows
-                    board={board}
-                    activeView={activeView}
-                    columnRefs={columnRefs}
-                    cards={cards}
-                    selectedCardIds={props.selectedCardIds}
-                    readonly={props.readonly}
-                    cardIdToFocusOnRender={props.cardIdToFocusOnRender}
-                    showCard={props.showCard}
-                    addCard={props.addCard}
-                    onCardClicked={props.onCardClicked}
-                    onDrop={onDropToCard}
-                />
-                }
-            </div>
-
-            {/* Add New row */}
-            <div className='octo-table-footer'>
-                {!props.readonly && !activeView.fields.groupById &&
                     <div
                         className='octo-table-cell'
                         onClick={() => {
@@ -388,16 +388,17 @@ const Table = (props: Props): JSX.Element => {
                             defaultMessage='+ New'
                         />
                     </div>
-                }
+                    }
-            </div>
+                </div>
 
-            <CalculationRow
+                <CalculationRow
-                board={board}
+                    board={board}
-                cards={cards}
+                    cards={cards}
-                activeView={activeView}
+                    activeView={activeView}
-                resizingColumn={resizingColumn}
+                    resizingColumn={resizingColumn}
-                offset={offset}
+                    offset={offset}
-            />
+                />
+            </div>
         </div>
     )
 }