From 83fac6d0db2cceaecb35b66a4dd4e116e607816d Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:00:31 +0200
Subject: [PATCH] feat: tweak stats panel input styles (#9321)

---
 .../components/Stats/DragInput.scss           | 32 ++++---------------
 .../excalidraw/components/Stats/Stats.scss    |  4 +++
 .../excalidraw/components/Stats/index.tsx     |  6 +++-
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/excalidraw/components/Stats/DragInput.scss b/packages/excalidraw/components/Stats/DragInput.scss
index 76b9d147b..f31616d94 100644
--- a/packages/excalidraw/components/Stats/DragInput.scss
+++ b/packages/excalidraw/components/Stats/DragInput.scss
@@ -2,10 +2,12 @@
   .drag-input-container {
     display: flex;
     width: 100%;
+    border-radius: var(--border-radius-lg);
 
     &:focus-within {
       box-shadow: 0 0 0 1px var(--color-primary-darkest);
       border-radius: var(--border-radius-md);
+      background: transparent;
     }
   }
 
@@ -16,24 +18,14 @@
 
   .drag-input-label {
     flex-shrink: 0;
-    border: 1px solid var(--default-border-color);
-    border-right: 0;
-    padding: 0 0.5rem 0 0.75rem;
+    border: 0;
+    padding: 0 0.5rem 0 0.25rem;
     min-width: 1rem;
+    width: 1.5rem;
     height: 2rem;
-    box-sizing: border-box;
+    box-sizing: content-box;
     color: var(--popup-text-color);
 
-    :root[dir="ltr"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-    }
-
-    :root[dir="rtl"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-      border-right: 1px solid var(--default-border-color);
-      border-left: 0;
-    }
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -51,20 +43,8 @@
     border: 0;
     outline: none;
     height: 2rem;
-    border: 1px solid var(--default-border-color);
-    border-left: 0;
     letter-spacing: 0.4px;
 
-    :root[dir="ltr"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-    }
-
-    :root[dir="rtl"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-      border-left: 1px solid var(--default-border-color);
-      border-right: 0;
-    }
-
     padding: 0.5rem;
     padding-left: 0.25rem;
     appearance: none;
diff --git a/packages/excalidraw/components/Stats/Stats.scss b/packages/excalidraw/components/Stats/Stats.scss
index 106ecf303..384e0fd3c 100644
--- a/packages/excalidraw/components/Stats/Stats.scss
+++ b/packages/excalidraw/components/Stats/Stats.scss
@@ -41,6 +41,10 @@
     div + div {
       text-align: right;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__row--heading {
diff --git a/packages/excalidraw/components/Stats/index.tsx b/packages/excalidraw/components/Stats/index.tsx
index 889f78971..11a5d6b5d 100644
--- a/packages/excalidraw/components/Stats/index.tsx
+++ b/packages/excalidraw/components/Stats/index.tsx
@@ -289,7 +289,11 @@ export const StatsInner = memo(
                           </StatsRow>
                         )}
 
-                      <StatsRow heading data-testid="stats-element-type">
+                      <StatsRow
+                        heading
+                        data-testid="stats-element-type"
+                        style={{ margin: "0.3125rem 0" }}
+                      >
                         {appState.croppingElementId
                           ? t("labels.imageCropping")
                           : t(`element.${singleElement.type}`)}