From 4ba1b3577729c8176405a7913bfd137f85ca5fcd Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 26 Jan 2022 02:30:41 +0300
Subject: [PATCH] Update Panel layout for AttributeBarEditor

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/panel/src/components/Panel.svelte | 20 +++++++++++++++++---
 packages/theme/styles/_layouts.scss        |  2 ++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 0b5d2ac6e8..5381644dcd 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -50,7 +50,13 @@
         </div>
         <ActionIcon icon={IconMoreH} size={'medium'} />
       </div>
-      {#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
+      {#if $$slots.subtitle}
+        <div class="flex-row-center subtitle">
+          <div class="flex-grow flex-row-center ml-10 mr-10">
+            <slot name="subtitle" />
+          </div>
+        </div>
+      {/if}
       <div class="flex-col scroll-container">
         <div class="flex-col content">
           <slot />
@@ -123,11 +129,19 @@
     }
 
     .subtitle {
+      overflow-x: auto;
       flex-shrink: 0;
-      padding: 0 2rem;
-      height: 3.5rem;
       min-height: 0;
+      height: 3.5rem;
       border-bottom: 1px solid var(--theme-zone-bg);
+
+      &::-webkit-scrollbar:horizontal { height: .25rem; }
+      &::-webkit-scrollbar-track { margin: 0; }
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--theme-menu-divider);
+        border-radius: .25rem;
+        &:hover { background-color: var(--theme-card-divider); }
+      }
     }
   }
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 989570b107..621e7dca5c 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -201,12 +201,14 @@ p:last-child { margin-block-end: 0; }
 .ml-3 { margin-left: .75rem; }
 .ml-4 { margin-left: 1rem; }
 .ml-6 { margin-left: 1.5rem; }
+.ml-10 { margin-left: 2.5rem; }
 .mr-1 { margin-right: .25rem; }
 .mr-2 { margin-right: .5rem; }
 .mr-3 { margin-right: .75rem; }
 .mr-4 { margin-right: 1rem; }
 .mr-6 { margin-right: 1.5rem; }
 .mr-8 { margin-right: 2rem; }
+.mr-10 { margin-right: 2.5rem; }
 .mt-2 { margin-top: .5rem; }
 .mt-3 { margin-top: .75rem; }
 .mt-4 { margin-top: 1rem; }