when-am-i / commit

style: constrain content to a centered column and tidy footer

591c237336cb1494bee1924234e354777073c8ce · Pavel Safronov · 2026-06-17 00:01:54 -0700 · parents bd3d5038bb39

style: constrain content to a centered column and tidy footer

- Wrap the page in a centered max-width (880px) column with padding, so the
  desktop layout isn't full-bleed wide and mobile text isn't flush to the edges.
- Footer: keep Source/Report as the primary links and demote the required
  Flaticon credit to muted fine print under a divider.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

 src/App.tsx                    |  4 ++--
 src/components/Attribution.tsx | 23 +++++++++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 49d4c3f..393916f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,8 +17,8 @@ function App() {
     useEffect(() => subscribeReportErrors(setRuntimeError), []);
 
     return (
-        <div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 16 }}>
+        <div style={{ maxWidth: 880, margin: '0 auto', padding: '24px 20px 48px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                 <img src={calendar} alt="Calendar icon" style={{ width: 48, height: 48 }} />
                 <h1 style={{ margin: 0 }}>What Year Is It?</h1>
             </div>
diff --git a/src/components/Attribution.tsx b/src/components/Attribution.tsx
index ba406fb..3e8bd51 100644
--- a/src/components/Attribution.tsx
+++ b/src/components/Attribution.tsx
@@ -2,13 +2,28 @@ import React from 'react';
 import { REPO_URL, reportMailtoHref } from '../utils/report';
 
 const Attribution: React.FC = () => (
-    <footer style={{ marginTop: 32, fontSize: '0.9em', color: '#555' }}>
-        <p style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+    <footer style={{ marginTop: 32, color: '#555' }}>
+        <p style={{ display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: '0.95em' }}>
             <a href={REPO_URL} target="_blank" rel="noopener noreferrer">Source code</a>
             <a href={reportMailtoHref()}>Report an issue</a>
         </p>
-        <p>
-            <a href="https://www.flaticon.com/free-icons/calendar" title="calendar icons">Calendar icons created by Icongeek26 - Flaticon</a>
+        <p
+            style={{
+                marginTop: 16,
+                paddingTop: 12,
+                borderTop: '1px solid #e3e5e8',
+                fontSize: '0.8em',
+                color: '#888',
+            }}
+        >
+            Calendar icon by{' '}
+            <a
+                href="https://www.flaticon.com/free-icons/calendar"
+                title="calendar icons"
+                style={{ color: '#888' }}
+            >
+                Icongeek26 &mdash; Flaticon
+            </a>
         </p>
     </footer>
 );