From f66e883016f67d83e15cc611103286f88850c417 Mon Sep 17 00:00:00 2001
From: Thomas Klepzig <tklepzig@users.noreply.github.com>
Date: Wed, 5 Aug 2026 19:17:08 +0200
Subject: [PATCH] Reduce length of ramp on mobile

---
 .changeset/early-parts-join.md | 5 +++++
 index.html                     | 8 ++++----
 scss/_panel-dock.scss          | 6 +++++-
 3 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/early-parts-join.md

diff --git a/.changeset/early-parts-join.md b/.changeset/early-parts-join.md
new file mode 100644
index 0000000..aac9039
--- /dev/null
+++ b/.changeset/early-parts-join.md
@@ -0,0 +1,5 @@
+---
+"ada-ui": patch
+---
+
+Reduced length of panel dock ramp on mobile
diff --git a/index.html b/index.html
index 8aad75f..c32973f 100644
--- a/index.html
+++ b/index.html
@@ -80,27 +80,27 @@
     </div>
     <div class="panel">
       <header>
-        <h1>Ada UI Design Guide</h1>
+        <h1>Ada UI</h1>
         <div class="panel-dock">
           <button
             class="command thin tone-4"
             data-theme="teal"
             data-label="Teal"
-            data-abbr="Tl"
+            data-abbr="T"
             onclick="selectTheme(this)"
           ></button>
           <button
             class="command thin"
             data-theme="blue"
             data-label="Blue"
-            data-abbr="Bl"
+            data-abbr="B"
             onclick="selectTheme(this)"
           ></button>
           <button
             class="command thin"
             data-theme="green"
             data-label="Green"
-            data-abbr="Gn"
+            data-abbr="G"
             onclick="selectTheme(this)"
           ></button>
           <button
diff --git a/scss/_panel-dock.scss b/scss/_panel-dock.scss
index 2c73309..968ad00 100644
--- a/scss/_panel-dock.scss
+++ b/scss/_panel-dock.scss
@@ -38,9 +38,13 @@ $ramp-path-footer: "M100,0 C#{100 - $ramp-swell-start},0 " +
 
   // ramp length as a multiple of the command height, so it tracks .thin
   --dock-unit: var(--command-min-size-thin);
-  --dock-ramp-scale: 2.5;
+  --dock-ramp-scale: 1.75;
   --dock-ramp: calc(var(--dock-unit) * var(--dock-ramp-scale));
 
+  @media (min-width: 640px) {
+    --dock-ramp-scale: 2.5;
+  }
+
   &:has(> .command:not(.thin)) {
     --dock-unit: var(--command-min-size);
   }