nmc/6665-new-button-not-responsive - #503
Merged
Merged
Conversation
NC33 renders the files list upload button as a direct child of .files-list__header, so the production styling in ncbreadcrumb.scss, scoped to .breadcrumb__actions, stopped applying. Relabel the button from "New" to "Add" and reapply the magenta pill styling in files.scss. Below 512px NC Teleports the button into <body> as a bottom-corner FAB, where the fixed Telekom footer (z-index 998, 61-89px tall) covered it completely, leaving it invisible and unclickable at every width from 320px to 511px. Pin the teleported element back onto the header row beside the grid-view button as a 40px plus-only circle, matching production. Overriding NC requires the same logical properties and a selector that out-specifies its per-build data-v hash, plus !important to beat its own !important on icon-only button sizing. Also: - Drop the hardcoded 82.15px width so the button sizes intrinsically. The fixed width clipped the German label, which needs 130px. - Add a :focus-visible outline, since all: unset strips the one button-vue provides. - Use margin-inline-end over margin-right and remove declarations made redundant by all: unset. - Replace the two single-shot MutationObservers with one document-level observer so the label survives Vue re-renders on navigation. Verified at 320/360/390/414/480/511px: aligned with the grid-view button, 40x40, 16px gap, unobstructed. Desktop rendering unchanged.
suet-kei-chan
changed the title
memurats
approved these changes
Sep 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
NC33 renders the files list upload button as a direct child of .files-list__header, so the production styling in ncbreadcrumb.scss, scoped to .breadcrumb__actions, stopped applying. Relabel the button from "New" to "Add" and reapply the magenta pill styling in files.scss.
Below 512px NC Teleports the button into as a bottom-corner FAB, where the fixed Telekom footer (z-index 998, 61-89px tall) covered it completely, leaving it invisible and unclickable at every width from 320px to 511px. Pin the teleported element back onto the header row beside the grid-view button as a 40px plus-only circle, matching production. Overriding NC requires the same logical properties and a selector that out-specifies its per-build data-v hash, plus !important to beat its own !important on icon-only button sizing.
Also:
Verified at 320/360/390/414/480/511px: aligned with the grid-view button, 40x40, 16px gap, unobstructed. Desktop rendering unchanged.