Fixed padding and scrollbars in TabList (#5296)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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 -->

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);
   }