From 4fe8d4f51f5c0284d9a9fcf37c1463ff040fdd41 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 25 Aug 2026 01:47:23 +0100
Subject: [PATCH] Update Styles and Layout in Dashboard Components

- Adjusted CSS styles in App.css for improved visual consistency, including changes to the positioning and appearance of skeleton inputs and separators.
- Modified padding in DashboardOverviewPage to enhance layout during editing mode.
- Enhanced loading state handling in ModelHistoryDisplay to provide clearer feedback based on chart data availability.
---
 assets/stylesheets/App.css                    | 23 +++++++++++++------
 .../common/DashboardOverviewPage.jsx          |  2 +-
 .../Dashboard/common/ModelHistoryDisplay.jsx  | 11 ++++++++-
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 15956e9b..d00ff1b0 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1986,7 +1986,7 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   position: absolute;
   top: 0;
   left: 0px;
-  transform: translateY(-50%);
+  transform: translateY(-60%);
   z-index: 4;
   width: max-content;
 }
@@ -2048,7 +2048,7 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   width: 2px;
   height: 100%;
   box-sizing: border-box;
-  border-left: 2px dashed color-mix(in srgb, var(--color-text) 25%, transparent);
+  border-left: 2px solid color-mix(in srgb, var(--color-text) 8%, transparent);
   pointer-events: none;
 }
 
@@ -2056,19 +2056,28 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .overview-flex-columns-separator.is-active
   .overview-flex-columns-separator-line {
   border-left: none;
-  background-color: var(--color-primary);
-  opacity: 0.5;
+  background-color: #a3e3ff;
+}
+
+.dark-mode
+  .overview-flex-columns-separator:hover
+  .overview-flex-columns-separator-line,
+.dark-mode
+  .overview-flex-columns-separator.is-active
+  .overview-flex-columns-separator-line {
+  background-color: #0e3a5b;
 }
 
 .overview-flex-columns-separator-handle {
   position: absolute;
-  top: 0;
+  top: 50%;
   left: 50%;
   transform: translateX(-50%);
   width: 2px;
-  height: 10px;
-  background-color: var(--color-primary);
+  height: 20px;
+  background-color: color-mix(in srgb, var(--color-text) 18%, transparent);
   pointer-events: none;
+  z-index: 4;
 }
 
 .overview-flex-columns-item > .ant-collapse {
diff --git a/src/components/Dashboard/common/DashboardOverviewPage.jsx b/src/components/Dashboard/common/DashboardOverviewPage.jsx
index 748253b3..0549dfb4 100644
--- a/src/components/Dashboard/common/DashboardOverviewPage.jsx
+++ b/src/components/Dashboard/common/DashboardOverviewPage.jsx
@@ -836,7 +836,7 @@ const DashboardOverviewPage = ({
           <Flex
             vertical
             gap='large'
-            style={isLayoutEditing ? { paddingTop: 11 } : undefined}
+            style={isLayoutEditing ? { paddingTop: 13.5 } : undefined}
             onDragOver={handleRootListDragOver}
             onDrop={(e) => handleDrop(e, 'root', 0)}
           >
diff --git a/src/components/Dashboard/common/ModelHistoryDisplay.jsx b/src/components/Dashboard/common/ModelHistoryDisplay.jsx
index 7939b3ba..72068573 100644
--- a/src/components/Dashboard/common/ModelHistoryDisplay.jsx
+++ b/src/components/Dashboard/common/ModelHistoryDisplay.jsx
@@ -457,7 +457,7 @@ const ModelHistoryDisplay = ({
 
           {!startDate && !endDate && (
             <Flex gap='middle' align='center'>
-              {loading == true && <LoadingOutlined />}
+              {loading == true && chartRows.length != 0 && <LoadingOutlined />}
               <Segmented
                 size='small'
                 options={[
@@ -481,6 +481,15 @@ const ModelHistoryDisplay = ({
             </ResponsiveContainer>
           </div>
         )}
+        {loading == true && chartRows.length == 0 && (
+          <Flex
+            justify='center'
+            align='center'
+            style={{ height: `${height}px` }}
+          >
+            <LoadingOutlined />
+          </Flex>
+        )}
         {loading == false && chartRows.length == 0 && (
           <Flex
             justify='center'