amadan
Size a menu panel to its rows, and leave the title's length to the app
Every panel is absolutely positioned inside a <details> no wider than its title, so its shrink-to-fit width was capped by the title and a row with a shortcut wrapped (Docs' Format > Decrease indent, found on first adoption). inline-size: max-content, clamped by the existing min and max. The bar's title input drops maxlength=1024, which was Docs' limit written into a shared template.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3 files changed,
+11
−2
chrome/templates/bar.html+1 −1menu/menu.css+8 −1menu/menu_test.go+2 −0
CI passed — run details
CI log
=== vet === CGO_ENABLED=0 go vet ./... go: downloading gorm.io/gorm v1.31.2 go: downloading gorm.io/plugin/dbresolver v1.6.2 go: downloading github.com/jinzhu/now v1.1.5 go: downloading github.com/jinzhu/inflection v1.0.0 go: downloading golang.org/x/text v0.20.0 === fmt === === build === CGO_ENABLED=0 go build ./... === go-test === CGO_ENABLED=0 go test -count=1 ./... ok amadan.net/oficina/estilo.git/base 0.004s ok amadan.net/oficina/estilo.git/brand 0.003s ok amadan.net/oficina/estilo.git/callui 0.004s ok amadan.net/oficina/estilo.git/chrome 0.083s ? amadan.net/oficina/estilo.git/cmd/oficina-notices [no test files] ok amadan.net/oficina/estilo.git/credits 0.006s ok amadan.net/oficina/estilo.git/credits/catalog 0.005s ok amadan.net/oficina/estilo.git/homeconnect 0.005s ok amadan.net/oficina/estilo.git/internal/lint 0.004s ? amadan.net/oficina/estilo.git/internal/tokencheck [no test files] ok amadan.net/oficina/estilo.git/menu 0.006s ok amadan.net/oficina/estilo.git/savestatus 0.072s ok amadan.net/oficina/estilo.git/theme 0.004s
diff --git a/chrome/templates/bar.html b/chrome/templates/bar.html| index bd90c76..4ac79e8 100644 |
| --- a/chrome/templates/bar.html |
| +++ b/chrome/templates/bar.html |
| @@ -61,6 +61,6 @@ |
| form, so Enter renames with scripts off. The submit button is visually |
| hidden until the form has focus. Data: chrome.TitleEdit. */}} |
| {{define "estilo-bar-title"}}<form estilo-bar-title method="post" action="{{.Action}}"> |
| - <input estilo-bar-title-input name="{{.Name}}" value="{{.Value}}" aria-label="{{.Label}}" autocomplete="off" spellcheck="false" dir="auto" maxlength="1024"> |
| + <input estilo-bar-title-input name="{{.Name}}" value="{{.Value}}" aria-label="{{.Label}}" autocomplete="off" spellcheck="false" dir="auto"> |
| <button rst-btn="ghost" type="submit" estilo-bar-title-submit>{{.Submit}}</button> |
| </form>{{end}} |
diff --git a/menu/menu.css b/menu/menu.css| index 8c86a05..2ddf029 100644 |
| --- a/menu/menu.css |
| +++ b/menu/menu.css |
| @@ -11,6 +11,12 @@ |
| } |
| [estilo-menu] { |
| box-sizing: border-box; |
| + /* Sized to its rows, not to what it hangs from. Every panel is absolutely |
| + positioned inside a <details> no wider than its title, and an absolute |
| + box's shrink-to-fit width is capped by that, so without this a row with |
| + a shortcut wrapped ("Decrease / indent") inside a menu with room to |
| + spare. Docs found it on first adoption. */ |
| + inline-size: max-content; |
| min-inline-size: 12rem; |
| max-inline-size: min(22rem, calc(100vw - 1rem)); |
| /* The 8rem floor is for short frames, where the viewport maths alone can |
| @@ -33,6 +39,7 @@ |
| position: absolute; |
| inset-inline: 0.5rem; |
| inset-block-start: calc(100% + 4px); |
| + inline-size: auto; |
| max-inline-size: none; |
| } |
| [estilo-menu] form { margin: 0; } |
| @@ -132,5 +139,5 @@ |
| @media (max-width: 30rem) { |
| [estilo-menubar-menu] { position: static; } |
| [estilo-menubar] { position: relative; } |
| - [estilo-menubar-menu] > [estilo-menu] { inset-inline: 0.5rem; min-inline-size: 0; max-inline-size: none; } |
| + [estilo-menubar-menu] > [estilo-menu] { inset-inline: 0.5rem; inline-size: auto; min-inline-size: 0; max-inline-size: none; } |
| } |
diff --git a/menu/menu_test.go b/menu/menu_test.go| index dc92040..4af67e2 100644 |
| --- a/menu/menu_test.go |
| +++ b/menu/menu_test.go |
| @@ -28,6 +28,8 @@ func TestFloatsAreRoundedAndMenubarTitlesSquare(t *testing.T) { |
| "--estilo-float-radius: 9px;", |
| "border-radius: var(--estilo-float-radius);", |
| "border-radius: 0; /* square: in-flow */", |
| + // Sized to its rows, not to the <details> it hangs from. |
| + "inline-size: max-content;", |
| } { |
| if !strings.Contains(src, want) { |
| t.Errorf("menu.css lost %q", want) |