FUCKER

devplacepy/static/css/CLAUDE.md

@@ -37,6 +37,6 @@ One global rule at the end of `base.css` collapses every animation/transition to
 
 - Flexbox + CSS Grid with `gap` only; floats for layout are forbidden.
 - Approved page layouts and the shared shell are documented in `/docs/styles-layout.html`; a page supplies exactly one layout container inside `.page`.
-- Every fluid grid/flex column sets `min-width: 0`.
+- Every fluid grid/flex column sets `min-width: 0`, and every fluid grid track that holds content is written `minmax(0, 1fr)`, never a bare `1fr`. A `1fr` track's automatic minimum is the item's min-content size, so one unwrappable line inside a rendered code block (`.rendered-content pre`, `white-space: pre`) widens the track and blows the whole page open sideways. This is why a detail page (a `max-width` block, definite width, the `pre` scrolls inside it) survives content that destroys a listing grid. The rule covers a column that is fixed-width at desktop but becomes the single fluid column at a breakpoint (`.profile-sidebar`), and it is regression-tested by `assert_no_horizontal_overflow` in `tests/conftest.py`.
 - `!important` is allowed only for: the `.hidden`/`[hidden]` display utilities, the global reduced-motion rule, and the devii-avatar third-party-beating override. Anything else is a specificity problem to be fixed structurally.
 - Page-specific CSS lives in its own `static/css/*.css` loaded via `{% block extra_head %}`, never an inline `<style>` block; shared component styles live once (`components.css`, `feed.css` vote buttons) and are never redefined per page.

devplacepy/static/css/awards.css

@@ -43,7 +43,7 @@
 
 @media (max-width: 768px) {
     .awards-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 }
 

devplacepy/static/css/feed.css

@@ -7,6 +7,9 @@
     align-items: start;
 }
 
+.feed-main {
+    min-width: 0;
+}
 
 .feed-nav {
     display: flex;

devplacepy/static/css/gists.css

@@ -17,6 +17,10 @@
     align-items: start;
 }
 
+.gists-main {
+    min-width: 0;
+}
+
 .gists-header {
     display: flex;
     align-items: center;
@@ -36,7 +40,7 @@
 
 .gists-grid {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: 1rem;
 }
 

devplacepy/static/css/landing.css

@@ -141,6 +141,10 @@
     align-items: start;
 }
 
+.dashboard-feed {
+    min-width: 0;
+}
+
 .dashboard-feed-header {
     display: flex;
     align-items: center;
@@ -167,7 +171,7 @@
 
 .dashboard-posts-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.875rem;
 }
 
@@ -373,7 +377,7 @@
         align-items: flex-start;
     }
     .dashboard-posts-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 }
 
@@ -713,7 +717,7 @@
 
 .landing-posts-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem;
 }
 
@@ -850,7 +854,7 @@
         padding: 0 1rem;
     }
     .landing-posts-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 }
 

devplacepy/static/css/news.css

@@ -24,7 +24,7 @@
 
 .news-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1.25rem;
 }
 
@@ -283,7 +283,7 @@
 
 @media (max-width: 768px) {
     .news-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 
     .news-header h1 {

devplacepy/static/css/profile.css

@@ -10,6 +10,7 @@
 .profile-sidebar {
     position: sticky;
     top: calc(var(--nav-height) + 1rem);
+    min-width: 0;
 }
 
 .profile-card {

devplacepy/static/css/projects.css

@@ -7,6 +7,10 @@
     align-items: start;
 }
 
+.projects-main {
+    min-width: 0;
+}
+
 .projects-tabs {
     display: flex;
     gap: 0.25rem;
@@ -177,13 +181,13 @@
         grid-template-columns: 1fr;
     }
     .projects-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .projects-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 
     .projects-header {

devplacepy/templates/docs/styles-consistency.html

@@ -85,7 +85,7 @@ Content sits on cards built from tokens: `--bg-card`, a `--border` hairline, `--
 - [ ] `{% extends "base.html" %}`; CSS via `extra_head`, JS via `extra_js`.
 - [ ] Two or more breadcrumbs passed in the SEO context (content clears the nav).
 - [ ] Exactly one layout container inside `.page`; no second `max-width` wrapper.
-- [ ] Multi-column = grid with `<aside>` rails, fluid column has `min-width: 0`, collapses at `1024px`.
+- [ ] Multi-column = grid with `<aside>` rails, fluid column has `min-width: 0`, card-grid tracks are `minmax(0, 1fr)`, collapses at `1024px`.
 - [ ] One `<h1>` (use `.sr-only` if visually redundant).
 - [ ] No custom header or footer; both come from `base.html`.
 - [ ] Only tokens for colour, spacing, radius, shadow, and z-index; no `var()` fallback values.

devplacepy/templates/docs/styles-layout.html

@@ -111,8 +111,8 @@ A new stacked element picks the token matching its role; if none fits, add a tok
 
 ## Acceptable and not
 
-- **Acceptable:** one layout container inside `.page`; CSS Grid for columns; `<aside>` for side columns; `min-width: 0` on the fluid column; sticky rails; cards built from tokens.
-- **Not acceptable:** a second `max-width`/centred wrapper inside `.page`; absolute positioning to fake columns; fixed pixel heights on content; a side column that does not collapse on small screens; a main column without `min-width: 0` (it will overflow on long code lines).
+- **Acceptable:** one layout container inside `.page`; CSS Grid for columns; `<aside>` for side columns; `min-width: 0` on the fluid column; `minmax(0, 1fr)` on card-grid tracks; sticky rails; cards built from tokens.
+- **Not acceptable:** a second `max-width`/centred wrapper inside `.page`; absolute positioning to fake columns; fixed pixel heights on content; a side column that does not collapse on small screens; a main column without `min-width: 0`, or a card grid on a bare `1fr` track (both overflow on long code lines - the track's automatic minimum is the item's min-content width, and a code block never wraps).
 {% endraw %}
 </div>