From f730e5304a552ae6d07201062d32a4ceeb00bd08 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 25 Aug 2026 01:28:22 +0100
Subject: [PATCH] Enhance Dashboard Overview Layout with New Action Card and
 Styles

- Introduced a new Card component for the overview flex columns actions, improving the layout and organization of action buttons.
- Updated styles in App.css to support the new action card positioning and enhance overall visual consistency.
- Replaced the XMarkIcon with a BinIcon for better clarity in the remove action button.
- Adjusted padding in the DashboardOverviewPage to improve layout during editing mode.
---
 assets/stylesheets/App.css                    | 20 +++++++++--
 .../common/DashboardOverviewFlexColumns.jsx   | 36 ++++++++++---------
 .../common/DashboardOverviewPage.jsx          |  1 +
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index b32da2f4..15956e9b 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1967,6 +1967,7 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 }
 
 .overview-flex-columns {
+  position: relative;
   box-sizing: border-box;
   width: 100%;
 }
@@ -1981,8 +1982,23 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   min-height: 72px;
 }
 
-.overview-flex-columns-toolbar {
-  margin-bottom: 8px;
+.overview-flex-columns-actions.ant-card {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  transform: translateY(-50%);
+  z-index: 4;
+  width: max-content;
+}
+
+.overview-flex-columns-actions.ant-card .ant-card-body {
+  line-height: 1;
+}
+
+.overview-flex-columns-actions .ant-btn {
+  height: auto;
+  width: auto;
+  padding: 0 2px;
 }
 
 .overview-flex-columns-row {
diff --git a/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx b/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx
index b170b1e0..22a06b55 100644
--- a/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx
+++ b/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx
@@ -8,9 +8,9 @@ import {
   useRef,
   useState
 } from 'react'
-import { Button, Flex } from 'antd'
+import { Button, Card, Flex } from 'antd'
 import PropTypes from 'prop-types'
-import XMarkIcon from '../../Icons/XMarkIcon.jsx'
+import BinIcon from '../../Icons/BinIcon.jsx'
 import {
   COLUMN_PROPORTION_STEP,
   normalizeColumnProportions
@@ -176,22 +176,24 @@ const DashboardOverviewFlexColumns = ({
       onDragLeave={onDragLeave}
     >
       {showToolbar && (
-        <Flex
-          justify='space-between'
-          align='center'
-          className='overview-flex-columns-toolbar'
+        <Card
+          size='small'
+          className='overview-flex-columns-actions'
+          styles={{ body: { padding: 2 } }}
         >
-          {dragHandle || <span />}
-          {onRemove ? (
-            <Button
-              type='text'
-              size='small'
-              icon={<XMarkIcon />}
-              onClick={onRemove}
-              aria-label='Remove columns'
-            />
-          ) : null}
-        </Flex>
+          <Flex align='center'>
+            {dragHandle}
+            {onRemove ? (
+              <Button
+                type='text'
+                size='small'
+                icon={<BinIcon />}
+                onClick={onRemove}
+                aria-label='Remove columns'
+              />
+            ) : null}
+          </Flex>
+        </Card>
       )}
       <Flex
         gap='large'
diff --git a/src/components/Dashboard/common/DashboardOverviewPage.jsx b/src/components/Dashboard/common/DashboardOverviewPage.jsx
index 2cd11b87..748253b3 100644
--- a/src/components/Dashboard/common/DashboardOverviewPage.jsx
+++ b/src/components/Dashboard/common/DashboardOverviewPage.jsx
@@ -836,6 +836,7 @@ const DashboardOverviewPage = ({
           <Flex
             vertical
             gap='large'
+            style={isLayoutEditing ? { paddingTop: 11 } : undefined}
             onDragOver={handleRootListDragOver}
             onDrop={(e) => handleDrop(e, 'root', 0)}
           >