From 3d69ec30fd8466cf37ae620bccac76c8da65920e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 24 Nov 2025 10:40:24 -0600 Subject: [PATCH 01/21] Remove old mobile columns --- app/assets/stylesheets/card-columns.css | 54 ------------------- app/views/boards/show.html.erb | 1 - .../boards/show/_mobile_columns.html.erb | 43 --------------- 3 files changed, 98 deletions(-) delete mode 100644 app/views/boards/show/_mobile_columns.html.erb diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 2170b576e9..97188bde7b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -37,10 +37,6 @@ &:has(.cards) { min-block-size: 20lh; } - - @media (max-width: 519px) { - display: none; - } } .card-columns__left, @@ -739,54 +735,4 @@ } } } - - /* Mobile columns - /* -------------------------------------------------------------------------- */ - - .mobile-card-columns { - --column-gap: 8px; - --column-padding-expanded: calc(var(--column-gap) * 2); - --column-width-collapsed: 40px; - --progress-increment: var(--progress-max-width) / var(--progress-max-cards); - --progress-max-cards: 20; - --progress-max-width: 100%; - - padding-inline: 3vw; - - /* Hide on larger devices with cursors */ - @media (min-width: 520px) { - display: none; - } - - .cards.is-collapsed { - inline-size: auto; - display: block; - padding-block: 0.5ch; - - .cards__expander { - --gradient-direction: to right; - - flex-direction: row; - inline-size: auto; - - &:before { - block-size: 1px; - inline-size: 100%; - inset: 50% 0 auto; - translaate: 0 -50%; - } - - &:after { - block-size: var(--column-width-collapsed); - inline-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)); - margin-inline-start: 0; - max-inline-size: var(--progress-max-width); - } - } - - .cards__expander-title { - writing-mode: revert; - } - } - } } diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb index 9f0c2ebeef..bd3266ac34 100644 --- a/app/views/boards/show.html.erb +++ b/app/views/boards/show.html.erb @@ -26,6 +26,5 @@ <%= render "boards/show/filtered_cards", page: @page %> <% else %> <%= render "boards/show/columns", page: @page, board: @board %> - <%= render "boards/show/mobile_columns", page: @page, board: @board %> <% end %> <% end %> diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb deleted file mode 100644 index 964d75220a..0000000000 --- a/app/views/boards/show/_mobile_columns.html.erb +++ /dev/null @@ -1,43 +0,0 @@ -
-
- <%= render "columns/show/add_card_button", board: board %> -
- - <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %> -
- <%= board.cards.postponed.count %> -

- Not Now -

-
- <% end %> - - <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %> -
- <%= board.cards.awaiting_triage.count %> -

- Maybe? -

-
- <% end %> - - <% board.columns.sorted.each do |column| %> - <%= link_to board_column_path(column.board, column), class: "cards cards--doing is-collapsed", style: "--card-color: #{column.color}", data: { turbo_frame: "_top" } do %> -
- <%= column.cards.active.count %> -

- <%= column.name %> -

-
- <% end %> - <% end %> - - <%= link_to board_columns_closed_path(board), class: "cards cards--closed is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %> -
- <%= board.cards.closed.count %> -

- Done -

-
- <% end %> -
From f9935aa065c9aecb33f95c944ab660efe81aff61 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 24 Nov 2025 11:10:38 -0600 Subject: [PATCH 02/21] Fold in "not(.is-collapsed)" styles --- app/assets/stylesheets/card-columns.css | 72 +++++++++++++------------ 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 97188bde7b..ad678ff356 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -82,9 +82,11 @@ &.is-off-screen { &:after { + background-color: var(--column-color); content: attr(data-column-name); font-size: var(--text-x-small); font-weight: 500; + inline-size: calc(var(--column-width-expanded) - 4px); /* make room for the dnd border */ line-height: var(--column-width-collapsed); padding-inline: 1ch; position: fixed; @@ -95,16 +97,11 @@ &.is-collapsed { &:after { + background-color: transparent; + inline-size: calc(var(--column-width-collapsed) - 4px); writing-mode: vertical-rl; } } - - &:not(.is-collapsed) { - &:after { - background-color: var(--column-color); - inline-size: calc(var(--column-width-expanded) - 4px); /* make room for the dnd border */ - } - } } } @@ -119,15 +116,16 @@ .cards__transition-container { block-size: 100%; border-radius: calc(var(--column-width-collapsed) / 2); + padding-inline: var(--column-padding-expanded); translate: 0; transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); - .is-collapsed:not(.cards--considering) & { - translate: 0 var(--column-width-collapsed); + .is-collapsed & { + padding-inline: 0; } - .cards:not(.is-collapsed) & { - padding-inline: var(--column-padding-expanded); + .is-collapsed:not(.cards--considering) & { + translate: 0 var(--column-width-collapsed); } .drag-and-drop__hover-container & { @@ -156,9 +154,10 @@ margin-block-start: -1ch; margin-inline: -1ch; overflow: hidden; + padding: 1ch; - .cards:not(.is-collapsed) & { - padding: 1ch; + .is-collapsed & { + padding: 0; } .card { @@ -228,15 +227,15 @@ /* ------------------------------------------------------------------------ */ .cards__header { - .cards.is-collapsed & { - block-size: 100%; - } + display: grid; + grid-template-areas: "menu expander maximize"; + grid-template-columns: var(--column-width-collapsed) 1fr var(--column-width-collapsed); + margin-block-end: calc(0.5 * var(--cards-gap)); - .cards:not(.is-collapsed) & { - display: grid; - grid-template-areas: "menu expander maximize"; - grid-template-columns: var(--column-width-collapsed) 1fr var(--column-width-collapsed); - margin-block-end: calc(0.5 * var(--cards-gap)); + .is-collapsed & { + block-size: 100%; + display: block; + margin-block-end: 0; } } @@ -254,7 +253,7 @@ opacity: 1; } - .cards.is-collapsed & { + .is-collapsed & { display: none; } } @@ -279,10 +278,17 @@ font-weight: 600; gap: 0.5ch; grid-area: expander; + inline-size: 100%; + justify-content: center; outline-offset: -2px; position: relative; text-transform: uppercase; + .is-collapsed & { + inline-size: auto; + justify-content: flex-start; + } + @media (any-hover: hover) { &:hover { filter: brightness(0.9); @@ -312,7 +318,7 @@ transition: none; } - .cards.is-collapsed & { + .is-collapsed & { block-size: 100%; flex-direction: column; inline-size: var(--column-width-collapsed); @@ -337,11 +343,6 @@ } } - .cards:not(.is-collapsed) & { - inline-size: 100%; - justify-content: center; - } - .cards:is(.cards--considering) &:hover { cursor: unset; filter: none; @@ -349,11 +350,12 @@ } .cards__expander-count { + display: none; line-height: var(--column-width-collapsed); inline-size: var(--column-width-collapsed); - .cards:not(.is-collapsed) & { - display: none; + .is-collapsed & { + display: block; } } @@ -385,14 +387,14 @@ transition: 150ms ease-out; transition-property: opacity, scale; - .cards.is-collapsed & { - display: none; - } - - .cards:not(.is-collapsed) .cards__expander:hover & { + .cards__expander:hover & { opacity: 0.66; scale: 1; } + + .is-collapsed & { + display: none; + } } } From 221a128c8fec81e1396db65be9533cee24328010 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 24 Nov 2025 11:16:40 -0600 Subject: [PATCH 03/21] Only apply collapsed styles on larger viewports --- app/assets/stylesheets/card-columns.css | 188 +++++++++++++----------- 1 file changed, 103 insertions(+), 85 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index ad678ff356..62d6918d4d 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -67,12 +67,14 @@ position: relative; scroll-snap-align: start; - &.is-collapsed { - inline-size: var(--column-width-collapsed); + @media (min-width: 640px) { + &.is-collapsed { + inline-size: var(--column-width-collapsed); - .pagination-link.pagination-link--active-when-observed, - .card { - display: none; + .pagination-link.pagination-link--active-when-observed, + .card { + display: none; + } } } @@ -95,11 +97,13 @@ translate: -50%; } - &.is-collapsed { - &:after { - background-color: transparent; - inline-size: calc(var(--column-width-collapsed) - 4px); - writing-mode: vertical-rl; + @media (min-width: 640px) { + &.is-collapsed { + &:after { + background-color: transparent; + inline-size: calc(var(--column-width-collapsed) - 4px); + writing-mode: vertical-rl; + } } } } @@ -120,12 +124,14 @@ translate: 0; transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); - .is-collapsed & { - padding-inline: 0; - } + @media (min-width: 640px) { + .is-collapsed & { + padding-inline: 0; + } - .is-collapsed:not(.cards--considering) & { - translate: 0 var(--column-width-collapsed); + .is-collapsed:not(.cards--considering) & { + translate: 0 var(--column-width-collapsed); + } } .drag-and-drop__hover-container & { @@ -156,8 +162,10 @@ overflow: hidden; padding: 1ch; - .is-collapsed & { - padding: 0; + @media (min-width: 640px) { + .is-collapsed & { + padding: 0; + } } .card { @@ -232,10 +240,12 @@ grid-template-columns: var(--column-width-collapsed) 1fr var(--column-width-collapsed); margin-block-end: calc(0.5 * var(--cards-gap)); - .is-collapsed & { - block-size: 100%; - display: block; - margin-block-end: 0; + @media (min-width: 640px) { + .is-collapsed & { + block-size: 100%; + display: block; + margin-block-end: 0; + } } } @@ -253,8 +263,10 @@ opacity: 1; } - .is-collapsed & { - display: none; + @media (min-width: 640px) { + .is-collapsed & { + display: none; + } } } @@ -284,17 +296,19 @@ position: relative; text-transform: uppercase; - .is-collapsed & { - inline-size: auto; - justify-content: flex-start; - } - @media (any-hover: hover) { &:hover { filter: brightness(0.9); } } + @media (min-width: 640px) { + .is-collapsed & { + inline-size: auto; + justify-content: flex-start; + } + } + /* Progress */ &:after { background: linear-gradient(var(--gradient-direction), var(--card-color), var(--column-color) 80%); @@ -318,28 +332,30 @@ transition: none; } - .is-collapsed & { - block-size: 100%; - flex-direction: column; - inline-size: var(--column-width-collapsed); - justify-content: start; - letter-spacing: 0.05em; - - /* Guitar string */ - &:before { - background-color: var(--column-color); + @media (min-width: 640px) { + .is-collapsed & { block-size: 100%; - content: ""; - inline-size: 1px; - inset: 0 auto; - position: absolute; - z-index: -2; - } - - &:after { - block-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)); - opacity: 1; + flex-direction: column; inline-size: var(--column-width-collapsed); + justify-content: start; + letter-spacing: 0.05em; + + /* Guitar string */ + &:before { + background-color: var(--column-color); + block-size: 100%; + content: ""; + inline-size: 1px; + inset: 0 auto; + position: absolute; + z-index: -2; + } + + &:after { + block-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)); + opacity: 1; + inline-size: var(--column-width-collapsed); + } } } @@ -354,29 +370,31 @@ line-height: var(--column-width-collapsed); inline-size: var(--column-width-collapsed); - .is-collapsed & { - display: block; + @media (min-width: 640px) { + .is-collapsed & { + display: block; + } } } .cards__expander-title { - font-weight: inherit; + align-items: center; + display: flex; font-size: inherit; + font-weight: inherit; + gap: 0.25ch; line-height: var(--column-width-collapsed); + max-inline-size: calc(100% - var(--column-width-collapsed) * 2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - .cards.is-collapsed & { - max-inline-size: 50vh; - writing-mode: vertical-rl; - } - - .cards:not(.is-collapsed, .cards--considering) & { - align-items: center; - display: flex; - gap: 0.25ch; - max-inline-size: calc(100% - var(--column-width-collapsed) * 2); + @media (min-width: 640px) { + .is-collapsed & { + align-items: flex-start; + max-inline-size: 50vh; + writing-mode: vertical-rl; + } } .icon--collapse { @@ -392,8 +410,10 @@ scale: 1; } - .is-collapsed & { - display: none; + @media (min-width: 640px) { + .is-collapsed & { + display: none; + } } } } @@ -679,32 +699,30 @@ /* -------------------------------------------------------------------------- */ /* Surface a mini bubble if there are cards with bubbles inside */ - .cards--doing.is-collapsed:has(.bubble:not([hidden])) { - .cards__transition-container { - --bubble-color: var(--card-color, oklch(var(--lch-blue-medium))); - --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%; - - &:before { - background: radial-gradient( - color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%, - color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100% - ); - block-size: 1em; - border-radius: var(--bubble-shape); - content: ""; - inline-size: 1em; - inset: 0 0 auto auto; - position: absolute; - translate: 20% -20%; - z-index: 1; + @media (min-width: 640px) { + .cards--doing.is-collapsed:has(.bubble:not([hidden])) { + .cards__transition-container { + --bubble-color: var(--card-color, oklch(var(--lch-blue-medium))); + --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%; + + &:before { + background: radial-gradient( + color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%, + color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100% + ); + block-size: 1em; + border-radius: var(--bubble-shape); + content: ""; + inline-size: 1em; + inset: 0 0 auto auto; + position: absolute; + translate: 20% -20%; + z-index: 1; + } } } } - .cards--considering:has(.bubble:not([hidden])) .cards__expander-title:before { - translate: 120% 50%; - } - /* Card column indicators /* -------------------------------------------------------------------------- */ From 43d24345a39bb610f4e443db17f14111dbbf101d Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 24 Nov 2025 13:52:15 -0600 Subject: [PATCH 04/21] Size columns to view viewport --- app/assets/stylesheets/card-columns.css | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 62d6918d4d..1fc317381b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -8,12 +8,12 @@ .card-columns { --bubble-size: 3.5rem; - --cards-gap: min(1.2cqi, 1.7rem); - --column-gap: 8px; + --cards-gap: clamp(0.75rem, 1.2cqi, 1.7rem); + --column-gap: 0.75rem; --column-padding-expanded: calc(var(--column-gap) * 2); --column-transition-duration: 300ms; --column-width-collapsed: 40px; - --column-width-expanded: 450px; + --column-width-expanded: calc(100vw - var(--column-gap) * 4); --progress-increment: var(--progress-max-height) / var(--progress-max-cards); --progress-max-cards: 20; --progress-max-height: 50dvh; @@ -29,6 +29,11 @@ padding-block-end: var(--column-width-collapsed); position: relative; + @media (min-width: 640px) { + --column-gap: 8px; + --column-width-expanded: 450px; + } + /* When it has something expanded */ &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) { grid-template-columns: auto var(--column-width-expanded) auto; @@ -120,13 +125,12 @@ .cards__transition-container { block-size: 100%; border-radius: calc(var(--column-width-collapsed) / 2); - padding-inline: var(--column-padding-expanded); translate: 0; transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); @media (min-width: 640px) { - .is-collapsed & { - padding-inline: 0; + &:not(.is-collapsed) { + padding-inline: var(--column-padding-expanded); } .is-collapsed:not(.cards--considering) & { @@ -153,7 +157,7 @@ /* The wrapper around the cards used to clip overflow while transitioning. * Also, don't resize cards while transitioning to avoid reflow. */ .cards__list { - align-items: flex-end; /* use flex-start to wipe from left */ + align-items: flex-end; display: flex; flex-direction: column; gap: var(--cards-gap); @@ -166,10 +170,10 @@ .is-collapsed & { padding: 0; } - } - .card { - inline-size: calc(var(--column-width-expanded) - var(--column-padding-expanded) * 2); + .card { + inline-size: calc(var(--column-width-expanded) - var(--column-padding-expanded) * 2); + } } .cards--grid & { From 040000b6674e0d29c96c19053fe0c0f8ddc6e00f Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 24 Nov 2025 14:05:14 -0600 Subject: [PATCH 05/21] Correct body grid-row-template on mobile --- app/assets/stylesheets/card-columns.css | 6 +++++- app/assets/stylesheets/layout.css | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 1fc317381b..742564cb2b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -53,7 +53,11 @@ .card-columns__left { justify-content: end; - padding-inline-start: var(--column-gap); + padding-inline-start: calc(var(--column-gap) * 2); + + @media (min-width: 640px) { + padding-inline-start: var(--column-gap); + } } .card-columns__right { diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index f4157a2708..b78a7574af 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -1,7 +1,11 @@ @layer base { body { display: grid; - grid-template-rows: auto 1fr auto 9em; + grid-template-rows: auto 1fr var(--footer-height); + + @media (min-width: 640px) { + grid-template-rows: auto 1fr auto 9em; + } &.public { grid-template-rows: auto 1fr auto; From f1136b61c95a8ab332e842a58b9ad6bb428ecc31 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 24 Nov 2025 14:31:08 -0600 Subject: [PATCH 06/21] Rejigger main layout --- app/assets/stylesheets/_global.css | 4 ++-- app/assets/stylesheets/bar.css | 6 ++---- app/assets/stylesheets/layout.css | 29 ++++++++++++++------------ app/assets/stylesheets/trays.css | 8 +++---- app/views/layouts/application.html.erb | 22 ++++++++++--------- 5 files changed, 36 insertions(+), 33 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 9c0b30f0f6..01cee68892 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -45,7 +45,7 @@ /* Components */ --btn-size: 2.65em; - --footer-height: 2.65rem; + --bar-height: 2.65rem; --tray-size: clamp(12rem, 25dvw, 24rem); /* Focus rings for keyboard navigation */ @@ -63,7 +63,7 @@ --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1); @media (max-width: 799px) { - --tray-size: var(--footer-height); + --tray-size: var(--bar-height); } /* Layout */ diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css index 1aa2494dea..0483459af0 100644 --- a/app/assets/stylesheets/bar.css +++ b/app/assets/stylesheets/bar.css @@ -3,17 +3,15 @@ --row-gap: 0.2lh; background-color: var(--color-terminal-bg); - block-size: calc(var(--footer-height) + env(safe-area-inset-bottom)); + block-size: calc(var(--bar-height) + env(safe-area-inset-bottom)); color: var(--color-terminal-text); display: flex; flex-direction: column; font-size: 0.9em; - inset: auto 0 0 0; max-block-size: 100%; padding-block: var(--block-space) calc(var(--block-space) + env(safe-area-inset-bottom)); padding-inline: calc(var(--tray-size) + calc(var(--inline-space) * 3)); place-content: center; - position: fixed; view-transition-name: bar; z-index: var(--z-bar); @@ -46,7 +44,7 @@ inline-size: 100vw; inset: auto 0 0 0; max-inline-size: 100vw; - margin-block-end: calc(var(--footer-height) - 0.3rem); + margin-block-end: calc(var(--bar-height) - 0.3rem); position: fixed; z-index: -1; diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index b78a7574af..6943650633 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -1,32 +1,35 @@ @layer base { body { + block-size: 100dvh; display: grid; - grid-template-rows: auto 1fr var(--footer-height); - - @media (min-width: 640px) { - grid-template-rows: auto 1fr auto 9em; - } + grid-template-rows: 1fr var(--bar-height); &.public { grid-template-rows: auto 1fr auto; } } + :where(#header) { + position: relative; + z-index: var(--z-nav); + } + + :where(#scroll-container) { + overflow: auto; + } + :where(#main) { inline-size: 100dvw; margin-inline: auto; max-inline-size: 100dvw; + overflow: auto; + padding-block-end: 1.5rem; padding-inline: var(--main-padding); text-align: center; - } - - :where(#footer) { - max-inline-size: 100dvw; - } - :where(#header) { - position: relative; - z-index: var(--z-nav); + @media (min-width: 800px) { + padding-block-end: 6rem; /* Room for cards in the tray */ + } } :is(#header, #footer) { diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index bb2538a7f9..ef9df039d5 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -9,7 +9,7 @@ --tray-item-height: 76px; /* FIXME: Magic number */ align-items: end; - block-size: var(--footer-height); + block-size: var(--bar-height); display: grid; inset-block: auto env(safe-area-inset-bottom); inline-size: var(--tray-size); @@ -51,11 +51,11 @@ box-shadow: 0 0 0 1px var(--color-ink-lighter), 0 0 16px oklch(var(--lch-black) / 33%); - inset-block-end: calc(var(--footer-height) - 0.75ch); + inset-block-end: calc(var(--bar-height) - 0.75ch); } &:not([open]) { - block-size: var(--footer-height); + block-size: var(--bar-height); pointer-events: none; /* On desktop, when there aren't items, tweak the hat so it doesn't look @@ -94,7 +94,7 @@ @media (max-width: 799px) { /* When collapsed on mobile, make it small */ .tray__dialog:not([open]) ~ & { - inline-size: var(--footer-height); + inline-size: var(--bar-height); .tray__toggle-btn { border: 0; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d2af3e9591..7d6bbf3a36 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -3,18 +3,20 @@ <%= render "layouts/shared/head" %> - +
+ - <%= render "layouts/shared/flash" %> - <%= render "layouts/shared/time_zone" if Current.user %> + <%= render "layouts/shared/flash" %> + <%= render "layouts/shared/time_zone" if Current.user %> -
- <%= yield %> -
+
+ <%= yield %> +
+