From aaaf5538932540f944d92725c63bb04cfe97ea14 Mon Sep 17 00:00:00 2001
From: RumovZ <gp5glkw78@relay.firefox.com>
Date: Thu, 14 Jul 2022 23:26:49 +0200
Subject: [PATCH] Add borders to tabs component

---
 ts/deck-options/DailyLimits.svelte | 42 ++++++++++++++++--------------
 ts/deck-options/Tabs.svelte        | 15 ++++++++---
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/ts/deck-options/DailyLimits.svelte b/ts/deck-options/DailyLimits.svelte
index 6352afc37..75d83224b 100644
--- a/ts/deck-options/DailyLimits.svelte
+++ b/ts/deck-options/DailyLimits.svelte
@@ -48,31 +48,33 @@
 
 <TitledContainer title={tr.deckConfigDailyLimits()}>
     <DynamicallySlottable slotHost={Item} {api}>
-        <Tabs {tabs} activeTab={activeReviewTab} />
-        <Item>
-            <SpinBoxRow
-                bind:value={$config.newPerDay}
-                defaultValue={defaults.newPerDay}
-                markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
-            >
-                {tr.schedulingNewCardsday()}
-            </SpinBoxRow>
-        </Item>
+        <Tabs {tabs} activeTab={activeReviewTab}>
+            <Item>
+                <SpinBoxRow
+                    bind:value={$config.newPerDay}
+                    defaultValue={defaults.newPerDay}
+                    markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
+                >
+                    {tr.schedulingNewCardsday()}
+                </SpinBoxRow>
+            </Item></Tabs
+        >
 
         <Item>
             <Warning warning={newCardsGreaterThanParent} />
         </Item>
 
-        <Tabs {tabs} activeTab={activeNewTab} />
-        <Item>
-            <SpinBoxRow
-                bind:value={$config.reviewsPerDay}
-                defaultValue={defaults.reviewsPerDay}
-                markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
-            >
-                {tr.schedulingMaximumReviewsday()}
-            </SpinBoxRow>
-        </Item>
+        <Tabs {tabs} activeTab={activeNewTab}>
+            <Item>
+                <SpinBoxRow
+                    bind:value={$config.reviewsPerDay}
+                    defaultValue={defaults.reviewsPerDay}
+                    markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
+                >
+                    {tr.schedulingMaximumReviewsday()}
+                </SpinBoxRow>
+            </Item></Tabs
+        >
 
         <Item>
             <Warning warning={reviewsTooLow} />
diff --git a/ts/deck-options/Tabs.svelte b/ts/deck-options/Tabs.svelte
index 4c3fa453b..549ad049d 100644
--- a/ts/deck-options/Tabs.svelte
+++ b/ts/deck-options/Tabs.svelte
@@ -16,16 +16,25 @@
         </li>
     {/each}
 </ul>
+<div class="content">
+    <slot />
+</div>
 
 <style lang="scss">
+    div.content {
+        border: 1px solid var(--border);
+        border-radius: 0.25rem;
+        margin-top: 0;
+        padding: 0.5rem;
+        z-index: -1;
+    }
+
     ul {
         display: flex;
         flex-wrap: wrap;
-        padding-left: 0;
         margin-top: 1rem;
         margin-bottom: 0.5rem;
         list-style: none;
-        border-bottom: 1px solid var(--border);
     }
 
     span {
@@ -35,7 +44,7 @@
         display: block;
         padding: 0.25rem 1rem;
         cursor: pointer;
-        margin: 0 8px -1px 0;
+        margin: 0 8px -7px 0;
         color: var(--disabled);
     }