(texera) branch gh-readonly-queue/main/pr-7948-319859571e30d123a50081a918815d9b65b4300f created (now 3638adf942)

[gi...@apache.org]

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

github-merge-queue[bot] pushed a change to branch gh-readonly-queue/main/pr-7948-319859571e30d123a50081a918815d9b65b4300f
in repository https://gitbox.apache.org/repos/asf/texera.git


      at 3638adf942 feat(frontend): let the upload drop zone grow with its content (#7948)

This branch includes the following new commits:

     new 3638adf942 feat(frontend): let the upload drop zone grow with its content (#7948)

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(texera) 01/01: feat(frontend): let the upload drop zone grow with its content (#7948)

[gi...@apache.org]

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

github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-7948-319859571e30d123a50081a918815d9b65b4300f
in repository https://gitbox.apache.org/repos/asf/texera.git

commit 3638adf942e647044ff2b039362031c151ec2767
Author: Kary Zheng <15...@users.noreply.github.com>
AuthorDate: Tue Aug 25 03:53:50 2026 +0000

    feat(frontend): let the upload drop zone grow with its content (#7948)
    
    ### What changes were proposed in this PR?
    
    The "Create New Version" uploader sits in the resizable side panel on
    the dataset detail page. `ngx-file-drop` fixes both its drop zone and
    content at `height: 100px`, and the prompt plus the browse button
    already stack taller than that, so the content spills past the dotted
    border. Narrowing the panel to its 150px minimum makes it much worse:
    the prompt wraps to four lines and the button, sized `width: 60%`, ends
    up narrower than its own label.
    
    This lets the box grow with what is inside it instead of clipping. The
    drop zone and its content keep 100px as a minimum and take their height
    from the content. The button sizes to the available width, wraps its
    label, and grows with it.
    
    Two overrides need more than a plain class selector. The library's own
    rule has the same specificity as a `::ng-deep` class selector, so the
    drop zone height needs the extra `ngx-file-drop` element selector to
    win. The button needs an explicit `height: auto` because ant-design's
    `.ant-btn` sets a fixed `32px`.
    
    One stylesheet, `files-uploader.component.scss`. No template or
    TypeScript change.
    
    Before, with the panel at its 150px minimum. The prompt runs above the
    dotted border and the button label is cut off on both sides.
    
    <img width="1523" height="994" alt="Screenshot 2026-08-24 at 3 28 12 PM"
    src="https://github.com/user-attachments/assets/dd073df2-eb39-4d7a-876d-dedeb09695d2"
    />
    
    After, same width, zoomed in on the uploader. Everything sits inside the
    border.
    
    <img width="382" height="642" alt="upload-dropzone-after"
    src="https://github.com/user-attachments/assets/289c0dd9-bb1d-4e86-9530-6ebb005070c0"
    />
    
    Measured at that width:
    
    | | before | after |
    |---|---|---|
    | drop zone height | 100px, fixed | 225px, follows content |
    | prompt overflow above the border | 55.3px | none |
    | prompt overflow below the border | 59.3px | none |
    | button overflow left and right | 1.2px | none |
    | button label clipped | yes | no |
    
    ### Any related issues, documentation, discussions?
    
    Fixes #7947.
    
    ### How was this PR tested?
    
    Verified by hand in the running app at the panel's minimum width, as
    shown in the screenshots above. This is a stylesheet-only change with no
    behavior to assert on.
    
    ### Was this PR authored or co-authored using generative AI tooling?
    
    Generated-by: Claude Code (Opus 5)
    
    Co-authored-by: Claude Opus 5 (1M context) <no...@anthropic.com>
---
 .../files-uploader/files-uploader.component.scss   | 25 +++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.scss b/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.scss
index 20f188e5ab..38e4e171f6 100644
--- a/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.scss
+++ b/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.scss
@@ -32,8 +32,22 @@
   border-color: #007bff;
 }
 
-.file-drop-description p {
+/* ngx-file-drop pins the drop zone and its content to a fixed 100px, which the
+   stacked prompt and button already exceed, so let the box grow instead of clipping.
+   The element selector is what outweighs the library's own equally specific rule. */
+:host ::ng-deep ngx-file-drop .ngx-file-drop__drop-zone,
+:host ::ng-deep ngx-file-drop .ngx-file-drop__content {
+  height: auto;
+  min-height: 100px;
+}
+
+.file-drop-description {
   text-align: center;
+  min-width: 0; /* Let the description shrink with the drop zone */
+  max-width: 100%;
+}
+
+.file-drop-description p {
   font-size: 15px;
   margin: 10px 0;
 }
@@ -50,11 +64,12 @@
 }
 
 .upload-file-button {
-  padding: 5px 20px; /* Smaller padding to make the button thinner */
+  padding: 5px 10px; /* Smaller padding to make the button thinner */
   font-size: 0.7em; /* Optionally reduce font size */
-  height: 30px; /* Or set a specific height */
-  width: 60%;
-  margin-left: 20%;
+  height: auto; /* Grow instead of clipping once the label wraps */
+  min-height: 30px;
+  max-width: 100%;
+  white-space: normal;
   display: inline-flex; /* Use flexbox to center content */
   align-items: center; /* Align items vertically */
   justify-content: center;