From baacf4913b9bd25b98bac928d28d7179ab32a173 Mon Sep 17 00:00:00 2001
From: Gani Georgiev <gani.georgiev@gmail.com>
Date: Fri, 1 Sep 2023 09:30:49 +0300
Subject: [PATCH] updated api preview tabs style

---
 .../collections/docs/AuthMethodsDocs.svelte         |  2 +-
 .../collections/docs/AuthRefreshDocs.svelte         |  2 +-
 .../collections/docs/AuthWithOAuth2Docs.svelte      |  2 +-
 .../collections/docs/AuthWithPasswordDocs.svelte    |  2 +-
 .../collections/docs/ConfirmEmailChangeDocs.svelte  |  2 +-
 .../docs/ConfirmPasswordResetDocs.svelte            |  2 +-
 .../collections/docs/ConfirmVerificationDocs.svelte |  2 +-
 .../collections/docs/CreateApiDocs.svelte           |  2 +-
 .../collections/docs/DeleteApiDocs.svelte           |  2 +-
 .../components/collections/docs/ListApiDocs.svelte  |  2 +-
 .../collections/docs/ListExternalAuthsDocs.svelte   |  2 +-
 .../collections/docs/RequestEmailChangeDocs.svelte  |  2 +-
 .../docs/RequestPasswordResetDocs.svelte            |  2 +-
 .../collections/docs/RequestVerificationDocs.svelte |  2 +-
 ui/src/components/collections/docs/SdkTabs.svelte   |  2 +-
 .../collections/docs/UnlinkExternalAuthDocs.svelte  |  2 +-
 .../collections/docs/UpdateApiDocs.svelte           |  2 +-
 .../components/collections/docs/ViewApiDocs.svelte  |  2 +-
 ui/src/scss/_tabs.scss                              | 13 +++++++++++++
 19 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/collections/docs/AuthMethodsDocs.svelte b/ui/src/components/collections/docs/AuthMethodsDocs.svelte
index e7324042..274f8f49 100644
--- a/ui/src/components/collections/docs/AuthMethodsDocs.svelte
+++ b/ui/src/components/collections/docs/AuthMethodsDocs.svelte
@@ -103,7 +103,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/AuthRefreshDocs.svelte b/ui/src/components/collections/docs/AuthRefreshDocs.svelte
index 0b9f0c98..6dcfef61 100644
--- a/ui/src/components/collections/docs/AuthRefreshDocs.svelte
+++ b/ui/src/components/collections/docs/AuthRefreshDocs.svelte
@@ -144,7 +144,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte b/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
index 32cc52cd..85f7a4c7 100644
--- a/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
+++ b/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
@@ -240,7 +240,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/AuthWithPasswordDocs.svelte b/ui/src/components/collections/docs/AuthWithPasswordDocs.svelte
index f4f5689c..508089a5 100644
--- a/ui/src/components/collections/docs/AuthWithPasswordDocs.svelte
+++ b/ui/src/components/collections/docs/AuthWithPasswordDocs.svelte
@@ -203,7 +203,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/ConfirmEmailChangeDocs.svelte b/ui/src/components/collections/docs/ConfirmEmailChangeDocs.svelte
index 12e38255..7e164f57 100644
--- a/ui/src/components/collections/docs/ConfirmEmailChangeDocs.svelte
+++ b/ui/src/components/collections/docs/ConfirmEmailChangeDocs.svelte
@@ -115,7 +115,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/ConfirmPasswordResetDocs.svelte b/ui/src/components/collections/docs/ConfirmPasswordResetDocs.svelte
index f767069f..2a38768f 100644
--- a/ui/src/components/collections/docs/ConfirmPasswordResetDocs.svelte
+++ b/ui/src/components/collections/docs/ConfirmPasswordResetDocs.svelte
@@ -129,7 +129,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/ConfirmVerificationDocs.svelte b/ui/src/components/collections/docs/ConfirmVerificationDocs.svelte
index 457257a9..c7304bf7 100644
--- a/ui/src/components/collections/docs/ConfirmVerificationDocs.svelte
+++ b/ui/src/components/collections/docs/ConfirmVerificationDocs.svelte
@@ -103,7 +103,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/CreateApiDocs.svelte b/ui/src/components/collections/docs/CreateApiDocs.svelte
index f50496df..57a6f7bb 100644
--- a/ui/src/components/collections/docs/CreateApiDocs.svelte
+++ b/ui/src/components/collections/docs/CreateApiDocs.svelte
@@ -319,7 +319,7 @@ await pb.collection('${collection?.name}').requestVerification('test@example.com
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/DeleteApiDocs.svelte b/ui/src/components/collections/docs/DeleteApiDocs.svelte
index 0b49c058..68b32df1 100644
--- a/ui/src/components/collections/docs/DeleteApiDocs.svelte
+++ b/ui/src/components/collections/docs/DeleteApiDocs.svelte
@@ -119,7 +119,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/ListApiDocs.svelte b/ui/src/components/collections/docs/ListApiDocs.svelte
index 1c591df1..0f12b876 100644
--- a/ui/src/components/collections/docs/ListApiDocs.svelte
+++ b/ui/src/components/collections/docs/ListApiDocs.svelte
@@ -242,7 +242,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 type="button"
diff --git a/ui/src/components/collections/docs/ListExternalAuthsDocs.svelte b/ui/src/components/collections/docs/ListExternalAuthsDocs.svelte
index 48c9c569..7889202a 100644
--- a/ui/src/components/collections/docs/ListExternalAuthsDocs.svelte
+++ b/ui/src/components/collections/docs/ListExternalAuthsDocs.svelte
@@ -155,7 +155,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/RequestEmailChangeDocs.svelte b/ui/src/components/collections/docs/RequestEmailChangeDocs.svelte
index 9b5d3dcd..bdb25ad8 100644
--- a/ui/src/components/collections/docs/RequestEmailChangeDocs.svelte
+++ b/ui/src/components/collections/docs/RequestEmailChangeDocs.svelte
@@ -122,7 +122,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/RequestPasswordResetDocs.svelte b/ui/src/components/collections/docs/RequestPasswordResetDocs.svelte
index 5aab67e9..23d2358d 100644
--- a/ui/src/components/collections/docs/RequestPasswordResetDocs.svelte
+++ b/ui/src/components/collections/docs/RequestPasswordResetDocs.svelte
@@ -97,7 +97,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/RequestVerificationDocs.svelte b/ui/src/components/collections/docs/RequestVerificationDocs.svelte
index 4e387f42..c5abd824 100644
--- a/ui/src/components/collections/docs/RequestVerificationDocs.svelte
+++ b/ui/src/components/collections/docs/RequestVerificationDocs.svelte
@@ -97,7 +97,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/SdkTabs.svelte b/ui/src/components/collections/docs/SdkTabs.svelte
index 38e9a471..e1a6f66b 100644
--- a/ui/src/components/collections/docs/SdkTabs.svelte
+++ b/ui/src/components/collections/docs/SdkTabs.svelte
@@ -33,7 +33,7 @@
 </script>
 
 <div class="tabs sdk-tabs {classes}">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each sdkExamples as example (example.language)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/UnlinkExternalAuthDocs.svelte b/ui/src/components/collections/docs/UnlinkExternalAuthDocs.svelte
index fb7d720c..5f407c4b 100644
--- a/ui/src/components/collections/docs/UnlinkExternalAuthDocs.svelte
+++ b/ui/src/components/collections/docs/UnlinkExternalAuthDocs.svelte
@@ -132,7 +132,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/UpdateApiDocs.svelte b/ui/src/components/collections/docs/UpdateApiDocs.svelte
index b007f4f4..2605750e 100644
--- a/ui/src/components/collections/docs/UpdateApiDocs.svelte
+++ b/ui/src/components/collections/docs/UpdateApiDocs.svelte
@@ -338,7 +338,7 @@ final record = await pb.collection('${collection?.name}').update('RECORD_ID', bo
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/components/collections/docs/ViewApiDocs.svelte b/ui/src/components/collections/docs/ViewApiDocs.svelte
index 87000f1d..3d8772a6 100644
--- a/ui/src/components/collections/docs/ViewApiDocs.svelte
+++ b/ui/src/components/collections/docs/ViewApiDocs.svelte
@@ -140,7 +140,7 @@
 
 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
         {#each responses as response (response.code)}
             <button
                 class="tab-item"
diff --git a/ui/src/scss/_tabs.scss b/ui/src/scss/_tabs.scss
index 0493448d..3fb60d86 100644
--- a/ui/src/scss/_tabs.scss
+++ b/ui/src/scss/_tabs.scss
@@ -101,6 +101,19 @@ $tabContentAnimationSpeed: 0.2s;
         min-height: 30px;
         margin-bottom: var(--smSpacing);
     }
+    &.glued {
+        border: 0;
+        margin-bottom: -2px;
+        .tab-item {
+            &:after {
+                content: none;
+                display: none;
+            }
+            &.active {
+                background: var(--baseAlt1Color);
+            }
+        }
+    }
 }
 
 .tabs-content {