(zeppelin) branch branch-0.12 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 branch-0.12
in repository https://gitbox.apache.org/repos/asf/zeppelin.git


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

commit 680a04a51b9dd0929d9224ccafc26ad3edeb05d1
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>
    (cherry picked from commit bd5aac87782b4ed7a60ac0740d81f21fafbbb3e5)
    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 {