kz930 opened a new pull request, #7948: URL: https://github.com/apache/texera/pull/7948
### Purpose Fixes #7947. 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`. ### Changes One stylesheet, `files-uploader.component.scss`. No template or TypeScript change. ### Demo 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="1092" height="1106" alt="upload-dropzone-before" src="https://github.com/user-attachments/assets/78382de0-a296-4e10-bed5-b012150bcac5"; /> 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 | ### Tests Verified by hand in the running app at the panel's minimum width. This is a stylesheet-only change with no behavior to assert on. ### Was this PR authored with generative AI tooling? Generated-by: Claude Code (Opus 5) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
