From d59fa7465021136d01c6109da56e3d40d70dbb4b Mon Sep 17 00:00:00 2001 From: 4gray Date: Tue, 19 May 2026 01:16:49 +0200 Subject: [PATCH] fix(add-playlist): align dialog head with content padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The custom .apd-head was getting visually orphaned from the rest of the dialog body: zero horizontal padding so the title sat flush against the dialog edge (cards inside mat-dialog-content are inset by 24px), plus a ~44px vertical gap above the title even though the head reported padding: 0. The gap was Material's .mdc-dialog__title::before — a 40px-tall invisible inline element used to baseline-align dialog titles to a grid. Useful for single-line titles, hostile to a two-line head with explicit subtitle. Set .apd-head padding to 20px 24px 4px so it shares the dialog content's 24px horizontal rhythm, then suppress the ::before ghost. Title now sits 20px from the dialog top edge with the same left inset as the method cards and the form fields below. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../add-playlist-dialog.component.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss index 07f44751b..799fe67c0 100644 --- a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss +++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss @@ -18,12 +18,21 @@ } // ─── Dialog head (title + helper subtitle) ────────────────────────────────── +// `mat-dialog-title` carries Material's `.mdc-dialog__title` defaults, which +// include a 40px-tall `::before` ghost element for baseline alignment plus a +// 6px/9px asymmetric padding. Both fight our custom two-line head — kill the +// ghost and apply explicit padding so the title shares the same 24px +// horizontal inset as `mat-dialog-content` below. .apd-head { display: flex; flex-direction: column; gap: 4px; - margin: 0 0 8px; - padding: 0; + margin: 0; + padding: 20px 24px 4px; + + &::before { + display: none; + } } .apd-title {