(texera) branch main updated: fix(frontend): widen Workflow Detail modal to fit header row (#5125)

[mengw15]

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

mengw15 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 36f0b52167 fix(frontend): widen Workflow Detail modal to fit header 
row (#5125)
36f0b52167 is described below

commit 36f0b521674e74d679b0dc30bdf4ed963bfe1c39
Author: Meng Wang <meng...@uci.edu>
AuthorDate: Mon May 18 00:57:26 2026 -0700

    fix(frontend): widen Workflow Detail modal to fit header row (#5125)
    
    ### What changes were proposed in this PR?
    
    The user-workflow-list eye-icon opens `HubWorkflowDetailComponent`
    inside an `nz-modal` whose width is set to 60% of the viewport via
    `nzStyle: { width: "60%" }`. On narrow viewports (~800px) this yields a
    ~480px modal, and `HubWorkflowDetailComponent`'s desktop-oriented header
    layout breaks:
    
    - The `<h1>Workflow Detail Page</h1>` wraps to three lines (`Workflow` /
    `Detail` / `Page`).
    - The four panel buttons (👁 view, 👍 like, 👤 clones, Clone) overflow.
    - The `Clone` button gets clipped off the right edge of the modal.
    
    This PR swaps the outlier `nzStyle: { width: "60%" }` for the
    codebase-standard `nzWidth: "900px"` — matching the workspace "Edit
    Workflow Description" modal at
    
[`menu.component.ts:668`](https://github.com/apache/texera/blob/main/frontend/src/app/workspace/component/menu/menu.component.ts#L668)
    as well as the three other modals in this same file (lines 222, 236,
    284), all of which use `nzWidth: "<N>px"` strings. 900px comfortably
    fits the header row.
    
    The internal layout of `HubWorkflowDetailComponent` itself is not
    changed; making it truly responsive is a larger follow-up out of scope
    here.
    
    after change:
    
    <img width="899" height="666" alt="Screenshot 2026-05-17 at 9 03 54 PM"
    
src="https://github.com/user-attachments/assets/b0e69e38-aebb-4475-b2a0-30479513323b";
    />
    
    
    ### Any related issues, documentation, discussions?
    
    Closes #4877.
    
    ### How was this PR tested?
    
    CSS-only modal width adjustment. The fix is mechanical (one literal
    swap), so no automated test added — a unit test would only assert that
    the modal-creation call receives the new literal, which is a tautology
    of the diff. Verified locally by running the frontend dev server,
    navigating to the user workflow panel, and clicking the eye icon: the
    modal now opens at 900px with the title on one line, all four buttons
    visible, and no horizontal overflow.
    
    ### Was this PR authored or co-authored using generative AI tooling?
    
    Generated-by: Claude Code (claude-opus-4-7)
    
    Co-authored-by: Claude Opus 4.7 (1M context) <nore...@anthropic.com>
---
 .../src/app/dashboard/component/user/list-item/list-item.component.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git 
a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts 
b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts
index 0da2661f49..4cb8af764c 100644
--- a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts
@@ -406,7 +406,7 @@ export class ListItemComponent implements OnChanges {
         wid: wid ?? 0,
       },
       nzFooter: null,
-      nzStyle: { width: "60%" },
+      nzWidth: "max(900px, 60vw)",
       nzBodyStyle: { maxHeight: "70vh", overflow: "auto" },
     });