diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 05d2b016e..689b80215 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -102,7 +102,8 @@
}
/* Turbo */
- turbo-frame {
+ turbo-frame,
+ turbo-cable-stream-source {
display: contents;
}
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index e67d4d97d..dabdd69e5 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -1,4 +1,27 @@
@layer components {
+ /* Layout adjustments for contained scrolling
+ /* ------------------------------------------------------------------------ */
+
+ body.contained-scrolling {
+ block-size: 100dvh;
+ grid-template-rows: 1fr var(--footer-height);
+
+ #global-container,
+ #main {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ }
+
+ #global-container {
+ overflow: hidden;
+ }
+
+ #main {
+ overflow: auto;
+ padding: 0;
+ }
+ }
+
/* Column container
/* ------------------------------------------------------------------------ */
@@ -22,6 +45,7 @@
display: grid;
gap: var(--column-gap);
grid-template-columns: 1fr auto 1fr;
+ inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--main-width);
outline: none;
@@ -88,6 +112,7 @@
scroll-snap-align: start;
@media (max-width: 639px) {
+ overflow-y: auto;
scroll-snap-align: center;
}
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index e82992dfc..6ea479eb6 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -8,6 +8,16 @@
}
}
+ /* Required for the card column page on mobile, but not needed otherwise */
+ :where(#global-container) {
+ display: contents;
+ }
+
+ :where(#header) {
+ position: relative;
+ z-index: var(--z-nav);
+ }
+
:where(#main) {
inline-size: 100dvw;
margin-inline: auto;
@@ -22,11 +32,6 @@
max-inline-size: 100dvw;
}
- :where(#header) {
- position: relative;
- z-index: var(--z-nav);
- }
-
:is(#header, #footer) {
@media print {
display: none;
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 0f487e1f9..80cbfcdca 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -95,12 +95,6 @@
.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
- .overflow-hide-scrollbar::-webkit-scrollbar {
- @media (pointer: course) {
- display: none;
- }
- }
-
.overflow-line-clamp {
-webkit-line-clamp: var(--lines, 2);
-webkit-box-orient: vertical;
diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb
index bd3266ac3..e1b0a3e96 100644
--- a/app/views/boards/show.html.erb
+++ b/app/views/boards/show.html.erb
@@ -1,4 +1,5 @@
<% @page_title = @board.name %>
+<% @body_class = "contained-scrolling" %>
<% turbo_exempts_page_from_cache %>
<%= turbo_stream_from @board %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6aef1f1bc..ffc7f271f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -2,19 +2,21 @@
<%= 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 %>
+
+