Merge pull request #3 from refactorfirst/clean-up-layout

Clean up layout and center hero search bar on landing page

Author: jimbethancourt

AGENTS.md

@@ -111,4 +111,4 @@ tests/                      # unit/ (Bun), integration/ (Bun + RTL/jsdom), e2e/
 
 ## Current Test Count
 
-~271 unit/integration + 81 E2E (three browsers + basePath leg).
+~294 unit/integration + 112 E2E (three browsers + basePath leg).

app/about/page.jsx

@@ -1,6 +1,6 @@
 export default function AboutPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>About RefactorFirst</h1>
       <p>RefactorFirst is a static analysis tool that identifies which classes in your Java
          codebase you should refactor first, ranked by cost-benefit. It is based on the paper

app/api/page.jsx

@@ -1,6 +1,6 @@
 export default function ApiPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>API for Tool Integrations</h1>
 
       <h2>Fetching reports programmatically</h2>

app/documentation/page.jsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function DocumentationPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>Documentation</h1>
 
       <h2>Generating Reports</h2>

app/examples/page.jsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function ExamplesPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>Example Reports</h1>
       <p>See RefactorFirst reports for real projects. Each link opens the live report
          rendered from that repository.</p>

app/faq/page.jsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function FaqPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>Frequently Asked Questions</h1>
 
       <h2>What do the different priority colors mean?</h2>

app/feedback/page.jsx

@@ -1,6 +1,6 @@
 export default function FeedbackPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>Feedback</h1>
       <p>We welcome your feedback! The best place to share ideas, report bugs or request
          features is the RefactorFirst project on GitHub.</p>

app/getting-started/page.jsx

@@ -3,7 +3,7 @@ import WorkflowSample from '../../components/workflow-sample';
 
 export default function GettingStartedPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>Getting Started</h1>
 
       <h2>1. Configure the RefactorFirst Maven plugin</h2>

app/globals.css

@@ -53,6 +53,30 @@ main:focus {
   outline: none;
 }
 
+/* mvp.css makes every `section` a wrapping flex row with no gap and center
+   justification (`section { display: flex; flex-wrap: wrap; justify-content:
+   var(--justify-important) }`). It targets the mvp `section > aside` card
+   pattern, but our pages use sections as plain prose containers — so headings,
+   paragraphs, lists and code blocks were laid out side by side as flex items
+   and smashed together. mvp.css is loaded after this bundle, so the reset must
+   win on specificity: `main section` (0-0-2) beats the bare `section`
+   selector (0-0-1) regardless of cascade order. */
+main section {
+  display: block;
+}
+
+/* Prose pages: roughly 75ch measure, centered in the wide main column. */
+.content-page {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+/* Landing sections (CTA, featured repos) that keep centered text now that
+   sections no longer flex-center their children. */
+.section-center {
+  text-align: center;
+}
+
 .hero {
   text-align: center;
   padding: 2.5rem 1rem;
@@ -225,11 +249,22 @@ pre {
 
 .hero-search {
   position: relative;
-  max-width: 480px;
+  /* Exactly half the rendered width of the top menu (#top-menu is capped by
+     mvp.css at --width-content = 1080px, full width below that) and centered
+     under it. */
+  width: min(540px, 50vw);
   margin: 1rem auto;
   text-align: left;
 }
 
+.hero-search input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid #c6d2dc;
+  border-radius: var(--radius);
+}
+
 /* ---- Repository grid ---- */
 .repo-grid,
 .featured-repos ul {
@@ -281,6 +316,17 @@ pre {
   color: #fff;
 }
 
+/* ---- User listing (/user) ---- */
+.repo-listing h1,
+.repo-listing .listing-subtitle {
+  text-align: center;
+}
+
+.listing-subtitle {
+  margin-top: 0.25rem;
+  color: var(--muted-color);
+}
+
 /* ---- Forms / add-repo ---- */
 .user-info {
   display: flex;
@@ -297,6 +343,7 @@ pre {
   display: grid;
   gap: 0.5rem;
   max-width: 420px;
+  margin: 0 auto;
 }
 
 .form-status.error {

app/privacy-policy/page.jsx

@@ -1,6 +1,6 @@
 export default function PrivacyPolicyPage() {
   return (
-    <section>
+    <section className="content-page">
       <h1>Privacy Policy</h1>
 
       <h2>Data Collected</h2>