fix: uniforma spacing verticale del footer in _modal.scss - #1897
Draft
Fupete wants to merge 3 commits into
Draft
Conversation
Footer vertical spacing was inconsistent across variants: the base/shadow case (including "Scroll di contenuti lunghi") had no padding-top at all, while .it-dialog-scrollable had a full one — an neither matched UI Kit Italia, which specifies a smaller vertical padding on the footer than what a full var(--modal-padding) gives. Dev Kit Italia has the same mismatch, different error always applying full padding-top with no compensation, causing double spacing wherever modal-body's own padding-bottom stacks on top of it. - modal-footer: now always has its own vertical padding, halved relative to the horizontal one — calc(var(--modal-padding) / 2) var(--modal-padding) — matching UI Kit Italia across every variant instead of only some. - modal-body: added a :has(+ .modal-footer) rule dropping its own padding-bottom whenever a footer follows, so the two never stack. Still keeps its bottom padding when there's no footer. - Removed the now-redundant padding-top override inside .it-dialog-scrollable's modal-footer, since the base rule already covers it. Not yet applied to Dev Kit Italia — needs the same change there before this is fully closed cross-repo. Refs #1888
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Fupete
commented
Aug 21, 2026
| align-items: center; // vertically center | ||
| justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items | ||
| padding: 0 var(--#{$prefix}modal-padding) var(--#{$prefix}modal-padding); | ||
| padding: calc(var(--#{$prefix}modal-padding) / 2) var(--#{$prefix}modal-padding); |
Contributor
Author
There was a problem hiding this comment.
Valore aleatorio. Va verificato. Potrebbe bastare il generico:
Suggested change
| padding: calc(var(--#{$prefix}modal-padding) / 2) var(--#{$prefix}modal-padding); | |
| padding: var(--#{$prefix}modal-padding); |
forse solo su mobile dovrebbe essere ridotto (vedi UI Kit Italia, dove però ci sono incongruenze nelle varianti con scollbar che sono ridotte in generale). Da ricontrollare.
Fupete
marked this pull request as draft
August 21, 2026 15:51
Fupete
changed the base branch from
fix/1888-component-custom-properties
to
3.x
September 4, 2026 09:40
Fupete
changed the base branch from
3.x
to
fix/1888-component-custom-properties
September 8, 2026 08:44
…al-footer-spacing
1 task
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
1 participant
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.
Cosa
Refs #1888
Lo spacing verticale tra
.modal-bodye.modal-footerera incoerente tra varianti:padding-top. Tutte le varianti appostro tranne spazio insufficiente sopra il footer prima dell'ombra dei contenuti nella variante "Scroll di contenuti lunghi"..it-dialog-scrollable: era apposto, footer conpadding-topIn ogni caso in tutte le varianti il padding-bottom e top di Footer era più ampio di quanto previsto da UI Kit Italia.
padding-toppieno sul footer, incondizionatamente, senza mai compensare ilpadding-bottomdi.modal-body— causando la doppia spaziatura in ogni variante, non solo in quella scrollabile. C'è troppo spazio lì.Modifiche:
.modal-footer: ora ha sempre un proprio padding verticale, dimezzato rispetto a quello orizzontale (calc(var(--#{$prefix}modal-padding) / 2) var(--#{$prefix}modal-padding)), uniforme su tutte le varianti — invece di essere zero in alcuni casi e pieno in altri..modal-body: aggiunta&:has(+ .modal-footer) { padding-bottom: 0; }— quando è seguito da un footer, il proprio spazio inferiore non si somma più a quello del footer. Resta invariato quando non c'è un footer.padding-topdentro.it-dialog-scrollable .modal-footer, ora coperta dalla regola base.Fix da confermare
Il valore dimezzato (
/ 2) è la mia migliore approssimazione a UI Kit Italia verificata a schermo, da confermare se serve un token dedicato a questa spaziatura footer verticale invece di uncalc()implicito.Fuori scope
caption-font-size, 14px, fedele a v2) e Dev Kit Italia (testo abody-font-size, 16/18px, nessun downsizing). Segnalato qui per visibilità, ma da trattare come issue di allineamento design a sé, non in questa PR.Checklist