From 2da90f69458cd627717ac21ae4a56e220d01eeb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Rua?=
 <140734849+joao4all@users.noreply.github.com>
Date: Thu, 25 Jul 2024 16:23:07 +0100
Subject: [PATCH] Feat #690 Model Tabs Fixed Position When Scrolling (#710)

* tabs row is now fixed on top of each view
* improved tabs row behavior when many tabs are open
---
 COMETwebapp/Components/Tabs/TabComponent.razor.css       | 2 +-
 COMETwebapp/Components/Tabs/TabsPanelComponent.razor     | 2 +-
 COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css | 9 +++++++++
 COMETwebapp/wwwroot/css/app.css                          | 4 ++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/COMETwebapp/Components/Tabs/TabComponent.razor.css b/COMETwebapp/Components/Tabs/TabComponent.razor.css
index c5b2b6aa..ac2247f8 100644
--- a/COMETwebapp/Components/Tabs/TabComponent.razor.css
+++ b/COMETwebapp/Components/Tabs/TabComponent.razor.css
@@ -1,5 +1,4 @@
 .tab-component {
-    max-width: fit-content;
     border-radius: 7.5px;
     padding: 2px 10px 2px 10px;
     display: flex;
@@ -8,6 +7,7 @@
     background-color: var(--colors-white);
     color: var(--colors-primary-800);
     font-weight: 500;
+    width: max-content;
 }
 
 .current-tab {
diff --git a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor
index f791ba6a..c80771de 100644
--- a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor
+++ b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor
@@ -27,7 +27,7 @@
 <div class="panel-view @(this.CssClass)">
     @if (this.Panel.CurrentTab is not null)
     {
-        <div class="d-flex tabs-row justify-content-between user-select-none">
+        <div class="tabs-row">
             <div class="d-flex gap-2">
                 <SortableList Group="tabs-panel" 
                               Items="@(this.Panel.OpenTabs.Items.ToList())" 
diff --git a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css
index abfcc3e8..49af517c 100644
--- a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css
+++ b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css
@@ -4,6 +4,15 @@
     padding: 16px;
     border-radius: 24px 0px 0px 0px;
     overflow: auto;
+    user-select: none;
+    justify-content: space-between;
+    display: flex;
+    max-height: 10vh;
+}
+
+#tabs-page-content{
+    max-height: 90vh;
+    overflow: auto;
 }
 
 .panel-view {
diff --git a/COMETwebapp/wwwroot/css/app.css b/COMETwebapp/wwwroot/css/app.css
index 59607a42..dd2b31a0 100644
--- a/COMETwebapp/wwwroot/css/app.css
+++ b/COMETwebapp/wwwroot/css/app.css
@@ -281,9 +281,9 @@ sub {
 }
 
 .data-items-panel-container {
-    max-height: 90vh;
+    max-height: 88vh;
     position: sticky;
-    top: 10px;
+    top: 0;
     flex: 1 1 35%;
     min-width: 350px;
 }