(zeppelin) branch master updated: [ZEPPELIN-6317] Fix responsive layout issue of the control action bar in New UI

[chanholee]

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

chanholee pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git


The following commit(s) were added to refs/heads/master by this push:
     new bd5aac8778 [ZEPPELIN-6317] Fix responsive layout issue of the control 
action bar in New UI
bd5aac8778 is described below

commit bd5aac87782b4ed7a60ac0740d81f21fafbbb3e5
Author: YONGJAE LEE(이용재) <dev.yongjae...@gmail.com>
AuthorDate: Sun Sep 7 13:04:21 2025 +0900

    [ZEPPELIN-6317] Fix responsive layout issue of the control action bar in 
New UI
    
    ### What is this PR for?
    In the Classic UI, when the window width was reduced, the top control bar 
area expanded vertically without breaking and did not overlap with paragraphs. 
However, in the New UI, the control bar layout breaks, its height is not 
flexible, and due to its fixed height, some paragraph buttons become 
unclickable.
    
    **[Appropriate action - Classic UI]**
    
    
https://github.com/user-attachments/assets/117660db-ffae-41b6-a4ac-acec5b26389e
    
    
    **[AS-IS]**
    
    
https://github.com/user-attachments/assets/228ee02d-e516-4db5-bd0c-5bcb79fabf5a
    
    
    **[TO-BE]**
    
    
https://github.com/user-attachments/assets/a7bfee29-8878-4c45-9e85-ddf7532ab67a
    
    ### What type of PR is it?
    Bug Fix
    Improvement
    
    ### Todos
    
    ### What is the Jira issue?
    * [[ZEPPELIN-6317](https://issues.apache.org/jira/browse/ZEPPELIN-6317)]
    
    ### How should this be tested?
    
    ### Screenshots (if appropriate)
    
    ### Questions:
    * Does the license files need to update? N
    * Is there breaking changes for older versions? N
    * Does this needs documentation? N
    
    
    Closes #5067 from dididy/fix/ZEPPELIN-6317.
    
    Signed-off-by: ChanHo Lee <chanho...@apache.org>
---
 .../notebook/action-bar/action-bar.component.less         | 15 ++++++++++++---
 .../app/pages/workspace/notebook/notebook.component.less  |  1 -
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
index 07a4450ee4..fde2fe3894 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
@@ -44,11 +44,14 @@
     margin-left: -1px;
   }
   .bar {
-    height: 60px;
+    min-height: 60px;
+    height: auto;
     background: @component-background;
     box-shadow: -2px 4px 2px 0 rgba(0, 0, 0, 0.06);
     padding: 5px 15px 5px 40px;
-    position: absolute;
+    position: sticky;
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
     top: 0;
     line-height: 50px;
@@ -80,6 +83,10 @@
       float: left;
       width: auto;
       max-width: 40%;
+
+      @media (max-width: 767px) {
+        max-width: 100%;
+      }
     }
 
     .control {
@@ -95,7 +102,9 @@
     }
 
     .setting {
-      float: right;
+      display: flex;
+      flex: 1;
+      justify-content: flex-end;
 
       button {
         box-shadow: none;
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less
index 6938ce448f..fe2fce0fd7 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less
@@ -18,7 +18,6 @@
     background: @layout-body-background;
     display: block;
     position: relative;
-    padding-top: 60px;
     min-height: calc(~"100vh - 50px");
 
     &.simple {