From d971c46b286d533e978bb3d79fee747273e39b19 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Wed, 10 Apr 2024 15:49:45 +0300
Subject: [PATCH] Fixed padding and scrollbars in TabList (#5296)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 packages/ui/src/components/TabList.svelte                    | 4 +++-
 .../notification-resources/src/components/inbox/Inbox.svelte | 5 +----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 9187f7762a..4e8d028106 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -29,6 +29,8 @@
   export let onlyIcons: boolean = false
   export let size: 'small' | 'medium' = 'medium'
   export let adaptiveShrink: WidthType | null = null
+  export let padding: string | undefined = undefined
+  export let bottomPadding: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -67,7 +69,7 @@
       }}
     />
   {:else}
-    <Scroller horizontal>
+    <Scroller horizontal stickedScrollBars {padding} {bottomPadding}>
       <div class="tablist-container {kind} {size} {expansion}">
         {#each items as item, i}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/plugins/notification-resources/src/components/inbox/Inbox.svelte b/plugins/notification-resources/src/components/inbox/Inbox.svelte
index 10d5166395..2287010743 100644
--- a/plugins/notification-resources/src/components/inbox/Inbox.svelte
+++ b/plugins/notification-resources/src/components/inbox/Inbox.svelte
@@ -346,7 +346,7 @@
         </div>
 
         <div class="tabs">
-          <TabList items={tabItems} selected={selectedTabId} on:select={selectTab} />
+          <TabList items={tabItems} selected={selectedTabId} on:select={selectTab} padding={'var(--spacing-1) 0'} />
         </div>
 
         <Scroller padding="0">
@@ -377,10 +377,7 @@
 <style lang="scss">
   .tabs {
     display: flex;
-    margin-top: 0.5rem;
-    margin-bottom: 0;
     padding: 0 var(--spacing-1_5);
-    padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--theme-navpanel-border);
   }