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 {
-  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 {

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 />}
+          <Flex align='center'>
+            {dragHandle}
             {onRemove ? (
               <Button
                 type='text'
                 size='small'
-              icon={<XMarkIcon />}
+                icon={<BinIcon />}
                 onClick={onRemove}
                 aria-label='Remove columns'
               />
             ) : 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)}
           >