1 From 0bed757e739ef450d14d739ba5e453afaf737f82 Mon Sep 17 00:00:00 20012 From: gl0w <gl0w@world>3 Date: Wed, 28 Oct 2026 11:16:09 +00004 Subject: [PATCH] stack Files then README on code tab (#120)5 6 ---7  .../issue.md                                  | 20 ++++++8  src/build.rs                                  |  6 +-9  static/style.css                              | 14 +---10  tests/code_cols.rs                            | 66 +++++++------------11  4 files changed, 49 insertions(+), 57 deletions(-)12  create mode 100644 .forge/issues/3c809870-aded-459e-af30-af4bed618b27/issue.md13 14 diff --git a/.forge/issues/3c809870-aded-459e-af30-af4bed618b27/issue.md b/.forge/issues/3c809870-aded-459e-af30-af4bed618b27/issue.md15 new file mode 10064416 index 0000000..486e23617 --- /dev/null18 +++ b/.forge/issues/3c809870-aded-459e-af30-af4bed618b27/issue.md19 @@ -0,0 +1,20 @@20 +---21 +id: 3c809870-aded-459e-af30-af4bed618b2722 +title: Stack Files then README on the code tab at every width23 +state: open24 +labels:25 +- area:render26 +assignees: []27 +milestone: null28 +created: 2026-10-28T11:10:17.690517388Z29 +updated: null30 +---31 +## Problem32 +33 +On wide screens the code tab switches to a two-column grid: Files on the left (7/12) and README on the right (5/12). The README becomes a narrow sidebar and the file table gets a different reading order from GitHub/Forgejo/GitLab-style code pages.34 +35 +## Fix36 +37 +- Keep Files and README in one stacked column at every width, in that order.38 +- Remove the `.cols-code` 7/5 desktop rule and the generic `.cols` two-column override.39 +- Update `tests/code_cols.rs` to assert there is no side-by-side rule and the DOM order stays Files → README.40 diff --git a/src/build.rs b/src/build.rs41 index 0604e87..3ab1ac8 10064442 --- a/src/build.rs43 +++ b/src/build.rs44 @@ -1933,8 +1933,8 @@ pub fn run_build(repo: &Path, out: &Path, opts: &BuildOptions) -> Result<BuildSu45      ));46  47      body.push_str("</div>\n");48 -    // Stacked below 1100px; files + README sit side by side only at49 -    // >=1100px via .cols-code (m6/code-cols, f0rge #45, 7/12 + 5/12).50 +    // Files then README in one stacked column at every width (f0rge #120);51 +    // no desktop sidebar split.52      // Code tab file TABLE (m6 code-gitea, f0rge #33, Gitea-style) plus the53      // language mix bar (bytes share, Tokyo Night hues, no JS).54      // Language math (m6, f0rge #37): tracked files only (via gitx, so55 @@ -1947,7 +1947,7 @@ pub fn run_build(repo: &Path, out: &Path, opts: &BuildOptions) -> Result<BuildSu56          gitx::ignored_paths(repo, &files).unwrap_or_default();57      let lang_files: Vec<(String, u64)> = lang_rows(&blobs, &ignored);58      let lang_section = language_bar(&lang_files);59 -    body.push_str("<div class=\"cols cols-code\"><section class=\"code-files\"><h2>Files</h2>\n");60 +    body.push_str("<div class=\"cols\"><section class=\"code-files\"><h2>Files</h2>\n");61      body.push_str(&file_table_html("", &root_entries, None, &history));62      body.push_str(&lang_section);63      body.push_str("</section>\n<section class=\"code-readme\"><h2>README</h2>\n");64 diff --git a/static/style.css b/static/style.css65 index 33982a6..ee5bf41 10064466 --- a/static/style.css67 +++ b/static/style.css68 @@ -137,7 +137,7 @@ td code,th code{word-break:break-all}69  /* List tables (m6/tables): long titles/shas wrap inside the scroll box; the # column stays narrow. */70  td.title,td.sha{overflow-wrap:anywhere}71  td.num{width:1%;white-space:nowrap}72 -/* Single column on mobile; side-by-side only when it fits (>=768px). */73 +/* Single-column stack; children keep DOM order. */74  .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;min-width:0}75  .cols>section,.cols>div{min-width:0}76  /* Forms: full-width on mobile, >=40px touch targets. */77 @@ -203,22 +203,14 @@ footer.site-footer .footer-provenance{margin:0;font-size:var(--fs-sm);text-align78  .brand-lockup:focus-visible,.site-header .site-nav.nav-scroll a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}79  .site-header .brand{flex:none}80  @media (min-width:768px){81 -  .cols{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}82    .site-nav .wrap{gap:.25rem 1.25rem}83    :root{--gap-head:1.25rem;--gap-content:1.5rem}84    main{padding:1.5rem 0 3rem}85  }86 -/* Code tab two columns (m6/code-cols, f0rge #45): files + README share87 -   the existing .cols grid; the code variant stays stacked below 1100px88 -   so 360px-1099px never squeezes the file table. At >=1100px files take89 -   7/12 and README 5/12 for a readable line length. Stacked override first90 -   so the later 1100px rule wins the cascade on desktop. */91 -@media (min-width:768px){92 -  .cols-code{grid-template-columns:minmax(0,1fr)}93 -}94 +/* The code tab is always one stacked column: Files, then README.95 +   No desktop 7/5 split; the file table keeps the full content width. */96  @media (min-width:1100px){97    .wrap{max-width:72rem;padding:0 1.5rem}98 -  .cols-code{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}99  }100  /* Code conventions (m6, f0rge #20): breadcrumbs, file meta, line anchors, clone block. */101  .crumbs{margin:var(--gap-head) 0 .5rem;font-size:.95rem}102 diff --git a/tests/code_cols.rs b/tests/code_cols.rs103 index 73a3ccb..c73a045 100644104 --- a/tests/code_cols.rs105 +++ b/tests/code_cols.rs106 @@ -1,6 +1,6 @@107 -//! Code tab two columns (m6, f0rge issue #45):108 -//! files + README share the existing `.cols` grid, side by side only at109 -//! >=1100px (files 7/12, README 5/12), stacked below.110 +//! Code tab stack (f0rge issue #120):111 +//! files and README share one stacked `.cols` column at every width, in112 +//! DOM order Files then README. No desktop sidebar split.113  //!114  //! Builds a small fixture repo with the real binary and string-asserts on115  //! the emitted HTML + `static/style.css` (no rendering engine needed).116 @@ -76,15 +76,19 @@ fn css() -> String {117  }118  119  #[test]120 -fn code_tab_wraps_files_and_readme_in_cols_code() {121 +fn code_tab_wraps_files_and_readme_in_stacked_column() {122      let out = build_fixture();123      let index = std::fs::read_to_string(out.join("index.html")).expect("index");124 -    // Wrapper reuses the existing .cols pattern with the code variant.125 +    // Wrapper is one plain stacked grid; no code-specific column variant.126      assert!(127 -        index.contains("<div class=\"cols cols-code\">"),128 -        "code tab wraps files + README in .cols.cols-code"129 +        index.contains("<div class=\"cols\">"),130 +        "code tab wraps files + README in .cols"131      );132 -    // Two sections in order: files (table) left, README right.133 +    assert!(134 +        !index.contains("cols-code"),135 +        "no dead side-by-side class in the markup"136 +    );137 +    // Two sections in order: files first, then README.138      let files_pos = index139          .find("<section class=\"code-files\">")140          .expect("files section");141 @@ -102,7 +106,7 @@ fn code_tab_wraps_files_and_readme_in_cols_code() {142      );143      assert!(144          files_block.contains("file-table"),145 -        "file table lives in the files (left) column"146 +        "file table lives in the files section"147      );148      let readme_block = &index[readme_pos..];149      assert!(150 @@ -111,12 +115,12 @@ fn code_tab_wraps_files_and_readme_in_cols_code() {151      );152      assert!(153          readme_block.contains("cols fixture"),154 -        "README body renders in the right column"155 +        "README body renders after the file table"156      );157  }158  159  #[test]160 -fn code_cols_breakpoint_is_1100px_stacked_below() {161 +fn code_tab_is_always_stacked() {162      let css = css();163      // Mobile-first base: .cols is a single stacked column.164      let base = css.split("@media (min-width").next().expect("base css");165 @@ -124,42 +128,18 @@ fn code_cols_breakpoint_is_1100px_stacked_below() {166          base.contains(".cols{display:grid;grid-template-columns:minmax(0,1fr)"),167          "base .cols stays stacked single-column"168      );169 -    // The code variant stays stacked through the 768px breakpoint170 -    // (overrides the generic .cols side-by-side there).171 +    // No code-specific columns and no wide-screen split anywhere.172 +    assert!(!css.contains(".cols-code"), "no code column variant");173      assert!(174 -        css.contains("@media (min-width:768px)"),175 -        "768px breakpoint kept"176 +        !css.contains("minmax(0,1.25fr)"),177 +        "generic .cols no longer goes two-column"178      );179      assert!(180 -        css.contains("@media (min-width:1100px)"),181 -        "1100px breakpoint present"182 +        !css.contains("minmax(0,7fr)") && !css.contains("minmax(0,5fr)"),183 +        "no desktop 7/5 files+README split"184      );185 -    let stacked_rule = ".cols-code{grid-template-columns:minmax(0,1fr)}";186      assert!(187 -        css.contains(stacked_rule),188 -        "cols-code stays stacked below 1100px, got no {stacked_rule:?}"189 -    );190 -    // Desktop: files 7/12 + README 5/12 inside the 1100px block.191 -    let wide_rule = ".cols-code{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}";192 -    assert!(193 -        css.contains(wide_rule),194 -        "cols-code is 7/12 + 5/12 at >=1100px, got no {wide_rule:?}"195 -    );196 -    let block_1100 = css197 -        .split("@media (min-width:1100px)")198 -        .nth(1)199 -        .expect("1100px block");200 -    let first_chunk = block_1100.split("@media").next().expect("1100 chunk");201 -    assert!(202 -        first_chunk.contains(".cols-code"),203 -        "7/5 rule lives in the 1100px block"204 -    );205 -    // Cascade order: the stacked 768px override comes before the 1100px206 -    // two-column rule, so desktop wins and 768px–1099px stays stacked.207 -    let stacked_pos = css.find(stacked_rule).expect("stacked rule pos");208 -    let wide_pos = css.find(wide_rule).expect("wide rule pos");209 -    assert!(210 -        stacked_pos < wide_pos,211 -        "stacked override precedes the 1100px two-column rule"212 +        css.contains("@media (min-width:1100px)") && css.contains(".wrap{max-width:72rem"),213 +        "wide layout keeps the readable content width"214      );215  }216 -- 217 2.56.0218