From 1461438bb5804f0f4c22a9fabf20e3e5ebae715f Mon Sep 17 00:00:00 2001
From: Shahid Raza <razashahid532@gmail.com>
Date: Wed, 1 Jul 2026 15:14:47 +0530
Subject: [PATCH 1/2] fix(resume): mobile responsiveness for the header and
 editor toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Resume header: on phones the "binary.semaphore" lockup collapsed onto the theme
  toggle and sign-in. Show only the "b." mark below sm (keeping the "/ resume"
  links), and add min-w-0 / shrink-0 guards so the two header groups can never
  overlap. Adds an opt-in `textClassName` to Wordmark; the marketing site is
  unchanged.
- Editor toolbar: the single non-wrapping row (home / title / template / tune /
  json / export) overflowed and squeezed the title to nothing on phones. It now
  wraps — the title row is full-width and the actions flow onto following rows —
  while staying a single row on >=sm.
- Tune popover: cap its width to the viewport so it can't hang off-screen on
  narrow devices.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/resume/(app)/layout.tsx      | 10 +++---
 src/components/resume/editor.tsx     | 11 +++---
 src/components/resume/tune-panel.tsx |  2 +-
 src/components/wordmark.tsx          | 54 +++++++++++++++-------------
 4 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/app/resume/(app)/layout.tsx b/src/app/resume/(app)/layout.tsx
index 6ef424b..1500415 100644
--- a/src/app/resume/(app)/layout.tsx
+++ b/src/app/resume/(app)/layout.tsx
@@ -34,14 +34,16 @@ export default async function ResumeAppLayout({
       className={`${figtree.variable} rx rx-canvas flex min-h-screen flex-col font-[family-name:var(--font-figtree)]`}
     >
       <header className="sticky top-0 z-30 border-b border-black/5 bg-white/70 backdrop-blur dark:border-white/10 dark:bg-[#161616]/75">
-        <div className="mx-auto flex h-12 w-full max-w-5xl items-center justify-between px-5">
-          <div className="flex items-center gap-2">
+        <div className="mx-auto flex h-12 w-full max-w-5xl items-center justify-between gap-3 px-5">
+          <div className="flex min-w-0 items-center gap-2">
             <a
               href={APEX}
               aria-label="Binary Semaphore home"
               className="shrink-0"
             >
-              <Wordmark />
+              {/* Full lockup on ≥sm; just the "b." mark on phones so the header
+                  never collides with the theme toggle / sign-in. */}
+              <Wordmark textClassName="max-sm:hidden" />
             </a>
             <span aria-hidden className="text-[color:var(--rx-muted)]">
               /
@@ -53,7 +55,7 @@ export default async function ResumeAppLayout({
               resume
             </Link>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex shrink-0 items-center gap-2">
             <ThemeToggle />
             {user ? (
               <>
diff --git a/src/components/resume/editor.tsx b/src/components/resume/editor.tsx
index a0550b2..087044a 100644
--- a/src/components/resume/editor.tsx
+++ b/src/components/resume/editor.tsx
@@ -137,10 +137,11 @@ export function Editor({
 
   return (
     <div className="flex h-screen flex-col">
-      {/* Toolbar */}
-      <header className="flex items-center justify-between gap-3 border-b border-border px-4 py-2.5">
-        <div className="flex min-w-0 items-center gap-3">
-          <Link href="/" className="rx-pill font-mono text-xs">
+      {/* Toolbar. Wraps on small screens (title row full-width, actions flow to
+          a second row) so nothing overflows or overlaps; single row on ≥sm. */}
+      <header className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-b border-border px-4 py-2.5">
+        <div className="flex min-w-0 basis-full items-center gap-3 sm:basis-auto">
+          <Link href="/" className="rx-pill shrink-0 font-mono text-xs">
             ← home
           </Link>
           <input
@@ -150,7 +151,7 @@ export function Editor({
             className="min-w-0 flex-1 rounded-lg border border-transparent bg-transparent px-2 py-1 text-sm font-medium text-foreground hover:border-border focus:border-border focus:bg-card focus:outline-none"
           />
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center justify-end gap-2">
           <SaveIndicator status={status} />
           <select
             value={templateId}
diff --git a/src/components/resume/tune-panel.tsx b/src/components/resume/tune-panel.tsx
index ef93913..e58b137 100644
--- a/src/components/resume/tune-panel.tsx
+++ b/src/components/resume/tune-panel.tsx
@@ -52,7 +52,7 @@ export function TunePanel({
         onClick={onClose}
         className="fixed inset-0 z-30 cursor-default"
       />
-      <div className="rx-panel absolute right-0 top-full z-40 mt-2 w-[248px] p-3.5 font-mono text-xs">
+      <div className="rx-panel absolute right-0 top-full z-40 mt-2 w-[248px] max-w-[calc(100vw-1.5rem)] p-3.5 font-mono text-xs">
         <div className="mb-3 flex items-center justify-between">
           <span className="text-[color:var(--rx-muted)]">{"// tune"}</span>
           <button
diff --git a/src/components/wordmark.tsx b/src/components/wordmark.tsx
index 28fa153..4149455 100644
--- a/src/components/wordmark.tsx
+++ b/src/components/wordmark.tsx
@@ -10,10 +10,14 @@ import { site } from "@/lib/site";
 export function Wordmark({
   className = "",
   forceDark = false,
+  textClassName = "",
 }: {
   className?: string;
   /** Always use the light-colored logo (for placing on a dark surface). */
   forceDark?: boolean;
+  /** Extra classes on the wordmark-text wrapper (e.g. `max-sm:hidden` to show
+   * only the "b." mark on small screens). Doesn't affect the mark tile. */
+  textClassName?: string;
 }) {
   return (
     <span className={`inline-flex items-center gap-2.5 ${className}`}>
@@ -27,27 +31,8 @@ export function Wordmark({
         unoptimized
         className="h-7 w-7 rounded-[0.45rem] ring-1 ring-black/5 dark:ring-white/10"
       />
-      {forceDark ? (
-        <Image
-          src="/brand/logo-dark.svg"
-          alt={site.wordmark}
-          width={138}
-          height={20}
-          priority
-          unoptimized
-          className="h-[18px] w-auto"
-        />
-      ) : (
-        <>
-          <Image
-            src="/brand/logo.svg"
-            alt={site.wordmark}
-            width={138}
-            height={20}
-            priority
-            unoptimized
-            className="h-[18px] w-auto dark:hidden"
-          />
+      <span className={`inline-flex items-center ${textClassName}`}>
+        {forceDark ? (
           <Image
             src="/brand/logo-dark.svg"
             alt={site.wordmark}
@@ -55,10 +40,31 @@ export function Wordmark({
             height={20}
             priority
             unoptimized
-            className="hidden h-[18px] w-auto dark:block"
+            className="h-[18px] w-auto"
           />
-        </>
-      )}
+        ) : (
+          <>
+            <Image
+              src="/brand/logo.svg"
+              alt={site.wordmark}
+              width={138}
+              height={20}
+              priority
+              unoptimized
+              className="h-[18px] w-auto dark:hidden"
+            />
+            <Image
+              src="/brand/logo-dark.svg"
+              alt={site.wordmark}
+              width={138}
+              height={20}
+              priority
+              unoptimized
+              className="hidden h-[18px] w-auto dark:block"
+            />
+          </>
+        )}
+      </span>
     </span>
   );
 }

From 3735ec1f664d7af21a8b6dbaf0809d371ef82a45 Mon Sep 17 00:00:00 2001
From: Shahid Raza <razashahid532@gmail.com>
Date: Wed, 1 Jul 2026 15:15:29 +0530
Subject: [PATCH 2/2] chore(release): v0.1.4

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CHANGELOG.md | 16 ++++++++++++++++
 package.json |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb8a816..6a2d68a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,21 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 Every release corresponds to a `staging` to `main` pull request and a matching
 `vX.Y.Z` tag on `main`.
 
+## [0.1.4] - 2026-07-01
+
+### Fixed
+
+- Mobile: the resume header's "binary.semaphore / resume" lockup overlapped the
+  theme toggle and sign-in on phones. Phones now show just the "b." mark (keeping
+  the "/ resume" links), with layout guards so the header groups can't overlap;
+  the full lockup returns at the `sm` breakpoint.
+- Mobile: the editor toolbar packed home / title / template / tune / json /
+  export into one non-wrapping row, which overflowed and squeezed the title field
+  to nothing. It now wraps (title row full-width, actions flowing below) on small
+  screens and stays a single row on wider ones.
+- The "tune" popover is capped to the viewport width so it can't hang off-screen
+  on narrow devices.
+
 ## [0.1.3] - 2026-06-30
 
 ### Fixed
@@ -97,6 +112,7 @@ marketing site rebrand.
 - Invalid nested `<a>` in template cards (hydration error).
 - Tolerate a missing `text_align` column before the migration runs.
 
+[0.1.4]: https://github.com/BiSemaphore/binarysemaphore.com/releases/tag/v0.1.4
 [0.1.3]: https://github.com/BiSemaphore/binarysemaphore.com/releases/tag/v0.1.3
 [0.1.2]: https://github.com/BiSemaphore/binarysemaphore.com/releases/tag/v0.1.2
 [0.1.1]: https://github.com/BiSemaphore/binarysemaphore.com/releases/tag/v0.1.1
diff --git a/package.json b/package.json
index 1681ab1..4b5f382 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "binarysemaphore",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev",