瀏覽代碼

Fix the dashboard CSS cascade: hero-actions specificity and the 55rem stack

app.css loads after spry.css, so the re-proportioned .dash-board columns
would have out-ranked the framework's own 55rem stacking rule inside its
@media block (media queries add no specificity) - the stacking is
restored in the goal-41-task-3 section. The advisor-hero-actions
override now matches the goal-27 rule's specificity so the later rule
wins the tie without editing the earlier section.
saddle-ClankerSaddle 1 天之前
父節點
當前提交
beb372d7ef
共有 1 個文件被更改,包括 14 次插入 和 3 次删除
  1. 14 3
      src/pages/app.css

+ 14 - 3
src/pages/app.css

@@ -1269,6 +1269,15 @@ dialog#quote-comment-dialog blockquote {
     grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
 }
 
+/* app.css loads after spry.css, so the re-proportioned columns above
+   would out-rank the framework's own 55rem stacking rule inside its
+   @media block (media queries add no specificity). Restore the stack
+   here so the rail drops under the attention column on narrow
+   screens. */
+@media (max-width: 55rem) {
+    .dash-board { grid-template-columns: minmax(0, 1fr); }
+}
+
 /* Section headings inside the attention column: quieter than the
    page's card headings so the pinned cards stay the visual lead. */
 .dash-heading {
@@ -1346,15 +1355,17 @@ dialog#quote-comment-dialog blockquote {
 
 /* The advisor hero's in-card heading copy (the samplers' composer
    shape): the description sits inside the composer card, above the
-   textarea; the chats link sits with the action, left. */
+   textarea; the chats link sits with the action, left. Same
+   specificity as the goal-27 rule above — this section is later in
+   the file, so it wins the tie without editing the earlier rule. */
 .advisor-hero-lede {
     margin: calc(-1 * var(--spry-space-1)) 0 0;
 }
-.advisor-hero-actions {
+.advisor-hero-form .advisor-hero-actions {
     align-items: baseline;
     justify-content: space-between;
 }
-.advisor-hero-actions .advisor-hero-link {
+.advisor-hero-form .advisor-hero-actions .advisor-hero-link {
     margin: 0;
 }