Size the header's back and ⋯ buttons to the heading
The default IconButton draws its icon at label size, slight beside a
heading. The header's icon buttons take the large size, and their icon
grows inside that square to sit level with the title.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RTqTY5gmGmtR4d3kBWGZTX
diff --git a/lib/rank_king/views/layout.rb b/lib/rank_king/views/layout.rb
index 4084aea..60c3b6e 100644
--- a/lib/rank_king/views/layout.rb
+++ b/lib/rank_king/views/layout.rb
@@ -69,7 +69,7 @@ module RankKing
def view_template(&block)
header do
if @back
- a(href: @back, class: "icon-button", aria_label: @back_label,
+ a(href: @back, class: "icon-button", data_size: "lg", aria_label: @back_label,
style: "--gl-icon: var(--gl-icon-chevron-left)")
end
h1(class: @size) { @title }
diff --git a/lib/rank_king/views/list/show.rb b/lib/rank_king/views/list/show.rb
index aca116e..5b57ff7 100644
--- a/lib/rank_king/views/list/show.rb
+++ b/lib/rank_king/views/list/show.rb
@@ -37,7 +37,7 @@ module RankKing
def render_menu
source = @list.source
- button(class: "icon-button", popovertarget: "list-actions", aria_label: "List actions",
+ button(class: "icon-button", data_size: "lg", popovertarget: "list-actions", aria_label: "List actions",
style: "--gl-icon: var(--rk-icon-more)")
nav(id: "list-actions", popover: true, aria_label: "List actions") do
ul(class: "card") do
diff --git a/public/css/app.css b/public/css/app.css
index 4ae083a..e5c8867 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -66,6 +66,11 @@ main > header {
main > header h1 { flex: 1; min-width: 0; }
+/* The header's icon buttons sit beside a heading, not a label: even at
+ the large size an icon at 1em looks slight next to it, so the icon
+ grows inside the same square. */
+main > header .icon-button { --gl-icon-style-size: 1.35em; }
+
section {
display: flex;
flex-direction: column;