Fix not scrollable tabs

IQ2i · Aug 19, 2024 · 535e5b8 · 535e5b8
1 parent b7cd803
commit 535e5b8
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/assets/scss/05_components/_components.actions.scss b/assets/scss/05_components/_components.actions.scss
@@ -2,11 +2,8 @@
   display: flex;
   gap: 1rem;
   padding: 0 3rem;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
   align-items: center;
+  flex-shrink: 0;
 }
 
 .actions_item {

diff --git a/assets/scss/05_components/_components.layout.scss b/assets/scss/05_components/_components.layout.scss
@@ -6,6 +6,10 @@
 
 header {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: .1rem solid var(--color-primary-10);
 }
 
 .main__content {
@@ -24,6 +28,11 @@ header {
     flex-direction: column;
 }
 
+.main__inner_header {
+    border-bottom: .1rem solid var(--color-primary-10);
+    border-top: .1rem solid var(--color-primary-10);
+}
+
 .main__inner_content {
     flex-grow: 1;
     overflow: auto;

diff --git a/assets/scss/05_components/_components.tabs.scss b/assets/scss/05_components/_components.tabs.scss
@@ -1,23 +1,37 @@
 .tabs {
   display: flex;
   align-items: center;
-  gap: 2.4rem;
-  padding: 0 2rem;
-  border-bottom: .1rem solid var(--color-primary-10);
-  border-top: .1rem solid var(--color-primary-10);
+  padding: .6rem 2rem .4rem 2rem;
+  overflow-x: scroll;
+}
+
+.tabs::-webkit-scrollbar-track {
+  background-color: #fff;
+}
+
+.tabs::-webkit-scrollbar {
+  height: .2rem;
+  width: 2rem;
+  background-color: var(--color-primary-20);
+}
+
+.tabs::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
 }
 
 .tabs__item {
   display: flex;
+  flex-shrink: 0;
+
 }
 
 .tabs__item_link {
   align-self: stretch;
-  padding: 1rem 0;
+  padding: .4rem 2rem;
+  border-radius: 99rem;
 }
 
 .tab-is-unactive {
-  border-bottom: .1rem solid transparent;
 
   &:hover {
     color: var(--color-primary);
@@ -26,5 +40,5 @@
 
 .tab-is-active {
   color: var(--color-primary);
-  border-bottom: .1rem solid var(--color-primary);
+  background-color: var(--color-bg);
 }
diff --git a/public/storia.css b/public/storia.css
@@ -470,6 +470,10 @@ body {
 
 header {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 0.1rem solid var(--color-primary-10);
 }
 
 .main__content {
@@ -488,6 +492,11 @@ header {
   flex-direction: column;
 }
 
+.main__inner_header {
+  border-bottom: 0.1rem solid var(--color-primary-10);
+  border-top: 0.1rem solid var(--color-primary-10);
+}
+
 .main__inner_content {
   flex-grow: 1;
   overflow: auto;
@@ -656,42 +665,50 @@ header {
 .tabs {
   display: flex;
   align-items: center;
-  gap: 2.4rem;
-  padding: 0 2rem;
-  border-bottom: 0.1rem solid var(--color-primary-10);
-  border-top: 0.1rem solid var(--color-primary-10);
+  padding: 0.6rem 2rem 0.4rem 2rem;
+  overflow-x: scroll;
+}
+
+.tabs::-webkit-scrollbar-track {
+  background-color: #fff;
+}
+
+.tabs::-webkit-scrollbar {
+  height: 0.2rem;
+  width: 2rem;
+  background-color: var(--color-primary-20);
+}
+
+.tabs::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
 }
 
 .tabs__item {
   display: flex;
+  flex-shrink: 0;
 }
 
 .tabs__item_link {
   align-self: stretch;
-  padding: 1rem 0;
+  padding: 0.4rem 2rem;
+  border-radius: 99rem;
 }
 
-.tab-is-unactive {
-  border-bottom: 0.1rem solid transparent;
-}
 .tab-is-unactive:hover {
   color: var(--color-primary);
 }
 
 .tab-is-active {
   color: var(--color-primary);
-  border-bottom: 0.1rem solid var(--color-primary);
+  background-color: var(--color-bg);
 }
 
 .actions {
   display: flex;
   gap: 1rem;
   padding: 0 3rem;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
   align-items: center;
+  flex-shrink: 0;
 }
 
 .actions_item {