(texera) branch main updated: fix(ui): remove duplicate left sidebar border and extend to bottom of page (#3849)

[linxinyuan]

This is an automated email from the ASF dual-hosted git repository.

linxinyuan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/texera.git


The following commit(s) were added to refs/heads/main by this push:
     new 97ef79c753 fix(ui): remove duplicate left sidebar border and extend to 
bottom of page (#3849)
97ef79c753 is described below

commit 97ef79c753efa0977a62744dbae7637018ab5422
Author: Grace Chia <94275517+gracecluvo...@users.noreply.github.com>
AuthorDate: Fri Oct 10 21:04:21 2025 -0700

    fix(ui): remove duplicate left sidebar border and extend to bottom of page 
(#3849)
    
    ### Purpose
    This PR is related to #3741, which found inconsistent vertical divider
    height across interface panels. This PR addresses the left sidebar
    specifically.
    
    ### Changes
    - Remove duplicate border on left sidebar
    - Make left sidebar border reach bottom of page if page extends past
    bottom of viewport
    
    ### Demonstration
    Before: left sidebar border is duplicated and too short
    <img width="1889" height="943"
    alt="490342553-6f5d8ff5-5a9a-4548-b47e-5414a95ac705"
    
src="https://github.com/user-attachments/assets/0f1ddc24-78f4-4e5f-84be-09d5d3b703c0";
    />
    After:
    <img width="1710" height="989" alt="Screenshot 2025-10-10 at 4 03 46 PM"
    
src="https://github.com/user-attachments/assets/924d5c1d-56ac-4a99-a6c8-a7d2696c6435";
    />
    
    Before: Gmail page: left sidebar border is too short
    <img width="1906" height="1069"
    alt="490342905-4aaf6236-7b34-4197-b467-c8540bcf4af2"
    
src="https://github.com/user-attachments/assets/dd052801-2e50-4d5a-af6d-8d3d6d7bdd78";
    />
    After: extends to bottom
    <img width="1710" height="989" alt="Screenshot 2025-10-10 at 4 04 06 PM"
    
src="https://github.com/user-attachments/assets/4df6f375-32e3-4c99-8529-b43edc47e4d5";
    />
    
    ---------
    
    Co-authored-by: Xinyuan Lin <xinyu...@uci.edu>
---
 .../src/app/dashboard/component/dashboard.component.html  |  2 +-
 .../src/app/dashboard/component/dashboard.component.scss  | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/core/gui/src/app/dashboard/component/dashboard.component.html 
b/core/gui/src/app/dashboard/component/dashboard.component.html
index cf490d3304..b238f56b93 100644
--- a/core/gui/src/app/dashboard/component/dashboard.component.html
+++ b/core/gui/src/app/dashboard/component/dashboard.component.html
@@ -193,7 +193,7 @@
   </nz-sider>
 
   <div class="page-container">
-    <nz-layout>
+    <nz-layout class="page-content-layout">
       <div
         [hidden]="!displayNavbar"
         id="nav">
diff --git a/core/gui/src/app/dashboard/component/dashboard.component.scss 
b/core/gui/src/app/dashboard/component/dashboard.component.scss
index a7fd800e5a..e327718ca1 100644
--- a/core/gui/src/app/dashboard/component/dashboard.component.scss
+++ b/core/gui/src/app/dashboard/component/dashboard.component.scss
@@ -50,7 +50,19 @@ button {
 
 .ant-layout-content {
   background-color: white;
-  border: 1px solid #f0f0f0;
+}
+
+.page-content-layout {
+  border-left: 1px solid #f0f0f0;
+}
+
+.ant-layout-sider-has-trigger {
+  border-right: none;
+}
+
+.ant-menu-inline,
+.ant-menu-inline-collapsed {
+  border: none;
 }
 
 .ant-menu {
@@ -74,6 +86,7 @@ button {
 
 nz-content {
   position: relative;
+  overflow-y: auto;
 }
 
 .page-container {