Release v0.1.4 — mobile responsiveness fixes

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "binarysemaphore",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

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 ? (
               <>

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}

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

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,38 +31,40 @@ 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}
             width={138}
             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>
   );
 }