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
STARIONGROUP · Jul 25, 2024 · 2da90f6 · 2da90f6
1 parent 85cb19e
commit 2da90f6
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }