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

@@ -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 {
+.overview-flex-columns-actions.ant-card {
-  margin-bottom: 8px;
+  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 {

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
+        <Card
-          justify='space-between'
+          size='small'
-          align='center'
+          className='overview-flex-columns-actions'
-          className='overview-flex-columns-toolbar'
+          styles={{ body: { padding: 2 } }}
         >
-          {dragHandle || <span />}
+          <Flex align='center'>
-          {onRemove ? (
+            {dragHandle}
-            <Button
+            {onRemove ? (
-              type='text'
+              <Button
-              size='small'
+                type='text'
-              icon={<XMarkIcon />}
+                size='small'
-              onClick={onRemove}
+                icon={<BinIcon />}
-              aria-label='Remove columns'
+                onClick={onRemove}
-            />
+                aria-label='Remove columns'
-          ) : null}
+              />
-        </Flex>
+            ) : null}
+          </Flex>
+        </Card>
       )}
       <Flex
         gap='large'

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)}
           >