diff --git a/app/components/recalc/calcHeading.tsx b/app/components/recalc/calcHeading.tsx
index b7e6cfe58..62f072fd8 100644
--- a/app/components/recalc/calcHeading.tsx
+++ b/app/components/recalc/calcHeading.tsx
@@ -41,8 +41,10 @@ export default function CalcHeading({
   }, [copied]);
 
   return (
-    <div className="mb-6 flex flex-row items-center justify-between border-b pt-6 pb-5">
-      <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+    <div className="mb-6 flex flex-row flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b pt-6 pb-5">
+      <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">
+        {title}
+      </h1>
       <div ref={wrapperRef} className="relative inline-flex">
         <Button
           variant="outline"
diff --git a/app/lib/math/chains.test.ts b/app/lib/math/chains.test.ts
index 0502abf03..7c390752b 100644
--- a/app/lib/math/chains.test.ts
+++ b/app/lib/math/chains.test.ts
@@ -5,39 +5,79 @@ import Measurement from '~/lib/models/Measurement';
 
 describe('calculateCenterDistance', () => {
   it('calculates center distance correctly', () => {
-    const result = calculateCenterDistance('#25', 20, 30, 50);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      30,
+      50,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(3.099, 3);
   });
 
   it('handles zero teeth for p1', () => {
-    const result = calculateCenterDistance('#25', 0, 30, 50);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      0,
+      30,
+      50,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(4.206, 3);
   });
 
   it('handles zero teeth for p2', () => {
-    const result = calculateCenterDistance('#25', 20, 0, 50);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      0,
+      50,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(4.936, 3);
   });
 
   it('handles zero links', () => {
-    const result = calculateCenterDistance('#25', 20, 30, 0);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      30,
+      0,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(-0.026, 3);
   });
 
   it('handles equal sprockets', () => {
-    const result = calculateCenterDistance('#25', 20, 20, 50);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      20,
+      50,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(3.75, 3);
   });
 
   it('works with different chain types', () => {
-    const result25 = calculateCenterDistance('#25', 20, 30, 50);
-    const result35 = calculateCenterDistance('#35', 20, 30, 50);
-    const result40 = calculateCenterDistance('#40', 20, 30, 50);
+    const result25 = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      30,
+      50,
+    );
+    const result35 = calculateCenterDistance(
+      new Measurement(0.375, 'in'),
+      20,
+      30,
+      50,
+    );
+    const result40 = calculateCenterDistance(
+      new Measurement(0.5, 'in'),
+      20,
+      30,
+      50,
+    );
 
     expect(result25.to('in').scalar).toBeCloseTo(3.099, 3);
     expect(result35.to('in').scalar).toBeCloseTo(4.649, 3);
@@ -46,13 +86,23 @@ describe('calculateCenterDistance', () => {
   });
 
   it('handles very small number of links', () => {
-    const result = calculateCenterDistance('#25', 20, 30, 10);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      30,
+      10,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(-0.043, 3);
   });
 
   it('handles large number of links', () => {
-    const result = calculateCenterDistance('#25', 20, 30, 200);
+    const result = calculateCenterDistance(
+      new Measurement(0.25, 'in'),
+      20,
+      30,
+      200,
+    );
 
     expect(result.to('in').scalar).toBeCloseTo(21.871, 3);
   });
@@ -61,7 +111,7 @@ describe('calculateCenterDistance', () => {
 describe('calculateCenters', () => {
   it('calculates centers correctly', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       30,
       new Measurement(10, 'in'),
@@ -76,7 +126,7 @@ describe('calculateCenters', () => {
 
   it('handles zero desired center', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       30,
       new Measurement(0, 'in'),
@@ -89,9 +139,24 @@ describe('calculateCenters', () => {
     expect(result.smaller.links).toBe(0);
   });
 
+  it('handles zero pitch', () => {
+    const result = calculateCenters(
+      new Measurement(0, 'in'),
+      20,
+      30,
+      new Measurement(10, 'in'),
+      false,
+    );
+
+    expect(result.larger.distance.to('in').scalar).toBe(0);
+    expect(result.smaller.distance.to('in').scalar).toBe(0);
+    expect(result.larger.links).toBe(0);
+    expect(result.smaller.links).toBe(0);
+  });
+
   it('handles zero teeth for p1', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       0,
       30,
       new Measurement(10, 'in'),
@@ -106,7 +171,7 @@ describe('calculateCenters', () => {
 
   it('handles zero teeth for p2', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       0,
       new Measurement(10, 'in'),
@@ -121,7 +186,7 @@ describe('calculateCenters', () => {
 
   it('handles invalid configuration (pitch diameter too large)', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       200,
       200,
       new Measurement(1, 'in'),
@@ -136,7 +201,7 @@ describe('calculateCenters', () => {
 
   it('works with allowHalfLinks true', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       30,
       new Measurement(10, 'in'),
@@ -151,7 +216,7 @@ describe('calculateCenters', () => {
 
   it('works with allowHalfLinks false (rounds to even)', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       30,
       new Measurement(10, 'in'),
@@ -166,7 +231,7 @@ describe('calculateCenters', () => {
 
   it('handles equal sprockets', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       20,
       new Measurement(10, 'in'),
@@ -179,7 +244,7 @@ describe('calculateCenters', () => {
 
   it('handles very small desired center', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       30,
       new Measurement(0.1, 'in'),
@@ -192,7 +257,7 @@ describe('calculateCenters', () => {
 
   it('handles very large desired center', () => {
     const result = calculateCenters(
-      '#25',
+      new Measurement(0.25, 'in'),
       20,
       30,
       new Measurement(100, 'in'),
@@ -205,7 +270,13 @@ describe('calculateCenters', () => {
 
   it('calculates difference from target correctly', () => {
     const desiredCenter = new Measurement(10, 'in');
-    const result = calculateCenters('#25', 20, 30, desiredCenter, false);
+    const result = calculateCenters(
+      new Measurement(0.25, 'in'),
+      20,
+      30,
+      desiredCenter,
+      false,
+    );
 
     expect(result.larger.differenceFromTarget.to('in').scalar).toBeCloseTo(
       0.117,
diff --git a/app/lib/math/chains.ts b/app/lib/math/chains.ts
index 64bf5940c..0e0ce8cfa 100644
--- a/app/lib/math/chains.ts
+++ b/app/lib/math/chains.ts
@@ -1,13 +1,12 @@
 import Measurement from '~/lib/models/Measurement';
-import { SimpleSprocket } from '~/lib/models/Sprocket';
 
 export function calculateCenterDistance(
-  chainType: string,
+  pitch: Measurement,
   p1Teeth: number,
   p2Teeth: number,
   links: number,
 ): Measurement {
-  const P = new SimpleSprocket(p1Teeth, chainType).pitch;
+  const P = pitch;
   const N = Math.max(p1Teeth, p2Teeth);
   const n = Math.min(p1Teeth, p2Teeth);
   const t1_ = 2 * links - N - n;
@@ -26,17 +25,19 @@ export type ChainClosestCentersResult = {
   larger: Result;
 };
 export function calculateCenters(
-  chainType: string,
+  pitch: Measurement,
   p1Teeth: number,
   p2Teeth: number,
   desiredCenter: Measurement,
   allowHalfLinks: boolean,
 ): ChainClosestCentersResult {
   if (
-    [desiredCenter.scalar, p1Teeth, p2Teeth].includes(0) ||
-    new SimpleSprocket(p1Teeth, chainType).pitchDiameter
+    [desiredCenter.scalar, p1Teeth, p2Teeth, pitch.scalar].includes(0) ||
+    pitch
+      .mul(p1Teeth)
+      .div(Math.PI)
       .div(2)
-      .add(new SimpleSprocket(p2Teeth, chainType).pitchDiameter.div(2))
+      .add(pitch.mul(p2Teeth).div(Math.PI).div(2))
       .gt(desiredCenter)
   ) {
     return {
@@ -56,7 +57,7 @@ export function calculateCenters(
   const z1 = p1Teeth;
   const z2 = p2Teeth;
   const c0 = desiredCenter;
-  const p = new SimpleSprocket(p1Teeth, chainType).pitch;
+  const p = pitch;
   const t1 = c0.mul(2).div(p);
   const t2 = (z1 + z2) / 2;
   const t3 = p.mul(Math.pow(Math.abs(z2 - z1) / (2 * Math.PI), 2)).div(c0);
@@ -68,13 +69,13 @@ export function calculateCenters(
     allowHalfLinks ? Math.floor(n) : Math.floor(n / 2) * 2;
 
   const smallerDistance = calculateCenterDistance(
-    chainType,
+    pitch,
     z1,
     z2,
     roundLinksDown(x0),
   );
   const largerDistance = calculateCenterDistance(
-    chainType,
+    pitch,
     z1,
     z2,
     roundLinksUp(x0),
diff --git a/app/root.tsx b/app/root.tsx
index 62136857e..8c28de7e8 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -54,7 +54,10 @@ export function Layout({ children }: { children: ReactNode }) {
             <AppSidebar />
             <SidebarInset>
               <Nav />
-              <div className="container mx-auto" data-testid="entrypoint">
+              <div
+                className="container mx-auto px-2 sm:px-0"
+                data-testid="entrypoint"
+              >
                 {children}
                 <footer className="mt-16 border-t py-8">
                   <Warning />
diff --git a/app/routes/arm.tsx b/app/routes/arm.tsx
index 31475832a..dd3983ce6 100644
--- a/app/routes/arm.tsx
+++ b/app/routes/arm.tsx
@@ -447,7 +447,9 @@ export default function Arm() {
                 <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                   Motor &amp; Gearing
                 </h2>
-                <IOLine>
+                {/* Motor and Ratio each get their own row on mobile; paired
+                    at md+. */}
+                <div className="flex flex-col gap-3 *:flex-1 md:flex-row md:gap-x-4">
                   <MotorInput
                     stateHook={[motor, setMotor]}
                     testId="motor"
@@ -458,7 +460,7 @@ export default function Arm() {
                     testId="ratio"
                     labelAbove
                   />
-                </IOLine>
+                </div>
               </div>
               <div className="border-t" />
 
@@ -824,7 +826,7 @@ export default function Arm() {
               <div className="border-t" />
 
               {/* Feedforward */}
-              <div className="grid grid-cols-3 gap-2 p-4">
+              <div className="grid grid-cols-1 gap-2 p-4 md:grid-cols-3">
                 <MeasurementDisplayOutput
                   state={feedforwardGains.kV}
                   label="kV"
@@ -884,7 +886,7 @@ export default function Arm() {
 
       {optimizationEnabled && (
         <div className="flex flex-col gap-4 px-1">
-          <div className="flex flex-row flex-wrap gap-4">
+          <div className="flex flex-col gap-4 md:flex-row">
             {/* Optimal configuration grid */}
             <div className="min-w-0 flex-1">
               <OptimalConfigGrid
@@ -897,7 +899,7 @@ export default function Arm() {
             </div>
 
             {/* Right column: settings + selected config */}
-            <div className="flex w-64 shrink-0 flex-col gap-3">
+            <div className="flex w-full flex-col gap-3 md:w-64 md:shrink-0">
               <section className="flex flex-col gap-3 rounded-lg border p-4">
                 <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                   Settings
diff --git a/app/routes/chains.tsx b/app/routes/chains.tsx
index aa89c3258..dfb3c7d72 100644
--- a/app/routes/chains.tsx
+++ b/app/routes/chains.tsx
@@ -9,20 +9,19 @@ import {
   MeasurementOutput,
 } from '~/components/recalc/io/measurement';
 import NumberInput, { NumberOutput } from '~/components/recalc/io/number';
-import { StringSelectInput } from '~/components/recalc/io/stringSelect';
 import { SprocketTable } from '~/components/recalc/sprocketTable';
+import { Button } from '~/components/ui/button';
+import { ButtonGroup } from '~/components/ui/button-group';
 import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card';
 import { useQueryParams, useSerializedState } from '~/lib/hooks';
 import { buildCalculatorApp, buildJsonLd, buildWebPage } from '~/lib/jsonld';
 import { calculateCenters } from '~/lib/math/chains';
 import Measurement from '~/lib/models/Measurement';
-import { SimpleSprocket } from '~/lib/models/Sprocket';
 import { buildMeta, pageUrl } from '~/lib/seo';
 import {
   BooleanParam,
   MeasurementParam,
   NumberParam,
-  StringParam,
 } from '~/lib/types/queryParams';
 
 const CHAINS_PATH = '/chains';
@@ -57,7 +56,7 @@ export function meta() {
 }
 
 const DEFAULT_PARAMS = {
-  chain: StringParam.withDefault('#25'),
+  pitch: MeasurementParam.withDefault(new Measurement(0.25, 'in')),
   p1Teeth: NumberParam.withDefault(16),
   p2Teeth: NumberParam.withDefault(36),
   desiredCenter: MeasurementParam.withDefault(new Measurement(5, 'in')),
@@ -68,7 +67,7 @@ const DEFAULT_PARAMS = {
 export default function Chains() {
   const queryParams = useQueryParams(DEFAULT_PARAMS);
 
-  const [chain, setChain] = useState(queryParams.chain);
+  const [pitch, setPitch] = useState(queryParams.pitch);
   const [p1Teeth, setP1Teeth] = useState(queryParams.p1Teeth);
   const [p2Teeth, setP2Teeth] = useState(queryParams.p2Teeth);
   const [desiredCenter, setDesiredCenter] = useState(queryParams.desiredCenter);
@@ -77,18 +76,25 @@ export default function Chains() {
     queryParams.allowHalfLinks,
   );
 
+  const activeChainType = useMemo(() => {
+    if (pitch.eq(new Measurement(0.25, 'in'))) return '#25';
+    if (pitch.eq(new Measurement(0.375, 'in'))) return '#35';
+    if (pitch.eq(new Measurement(8, 'mm'))) return '8mm';
+    return null;
+  }, [pitch]);
+
   const p1PitchDiameter = useMemo(() => {
-    return new SimpleSprocket(p1Teeth, chain).pitchDiameter;
-  }, [p1Teeth, chain]);
+    return pitch.mul(p1Teeth).div(Math.PI);
+  }, [p1Teeth, pitch]);
 
   const p2PitchDiameter = useMemo(() => {
-    return new SimpleSprocket(p2Teeth, chain).pitchDiameter;
-  }, [p2Teeth, chain]);
+    return pitch.mul(p2Teeth).div(Math.PI);
+  }, [p2Teeth, pitch]);
 
   const results = useMemo(
     () =>
-      calculateCenters(chain, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks),
-    [chain, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks],
+      calculateCenters(pitch, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks),
+    [pitch, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks],
   );
 
   const isSmallerChainSuggested = useMemo(
@@ -100,7 +106,7 @@ export default function Chains() {
   );
 
   const serializedState = useSerializedState(DEFAULT_PARAMS, {
-    chain,
+    pitch,
     p1Teeth,
     p2Teeth,
     desiredCenter,
@@ -124,25 +130,52 @@ export default function Chains() {
         getSerializedState={() => serializedState}
       />
 
-      <div className="flex flex-row flex-wrap gap-x-4 px-1 *:flex-1">
+      <div className="flex flex-row flex-wrap gap-x-4 gap-y-4 px-1 *:flex-1">
         <div className="flex flex-col gap-x-4 gap-y-2">
+          <div className="flex flex-wrap gap-y-2">
+            <ButtonGroup>
+              <Button
+                variant={activeChainType === '#25' ? 'default' : 'outline'}
+                onClick={() => setPitch(new Measurement(0.25, 'in'))}
+              >
+                #25
+              </Button>
+              <Button
+                variant={activeChainType === '#35' ? 'default' : 'outline'}
+                onClick={() => setPitch(new Measurement(0.375, 'in'))}
+              >
+                #35
+              </Button>
+              <Button
+                variant={activeChainType === '8mm' ? 'default' : 'outline'}
+                onClick={() => setPitch(new Measurement(8, 'mm'))}
+              >
+                8mm
+              </Button>
+            </ButtonGroup>
+          </div>
+
           <IOLine>
-            <StringSelectInput
-              stateHook={[chain, setChain]}
-              label="Chain Type"
-              choices={[
-                { label: '#25', value: '#25' },
-                { label: '#35', value: '#35' },
-              ]}
-              testId="chainType"
-            />
-            <BooleanInput
-              stateHook={[allowHalfLinks, setAllowHalfLinks]}
-              label="Allow Half Links"
+            <MeasurementInput
+              stateHook={[pitch, setPitch]}
+              label="Pitch"
+              testId="pitch"
+              labelAbove
             />
+            <div className="flex flex-col">
+              <div className="mb-1 text-xs" aria-hidden>
+                {' '}
+              </div>
+              <div className="flex h-9 items-center">
+                <BooleanInput
+                  stateHook={[allowHalfLinks, setAllowHalfLinks]}
+                  label="Allow Half Links"
+                />
+              </div>
+            </div>
           </IOLine>
 
-          <IOLine>
+          <IOLine className="flex-col md:flex-row">
             <MeasurementInput
               stateHook={[desiredCenter, setDesiredCenter]}
               label="Desired Center"
@@ -273,7 +306,7 @@ export default function Chains() {
         <div className="flex w-auto flex-col gap-x-4 gap-y-4">
           <SprocketTable
             filterFn={(sprocket) =>
-              sprocket.chainType === chain &&
+              sprocket.pitch.eq(pitch) &&
               (sprocket.teeth === p1Teeth || sprocket.teeth === p2Teeth)
             }
           />
diff --git a/app/routes/flywheel.tsx b/app/routes/flywheel.tsx
index f52b80d14..2f443a4b3 100644
--- a/app/routes/flywheel.tsx
+++ b/app/routes/flywheel.tsx
@@ -712,7 +712,9 @@ export default function Flywheel() {
                 <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                   Motors &amp; Electrical
                 </h2>
-                <IOLine>
+                {/* Motor and Efficiency each get their own row on mobile;
+                    paired at md+. */}
+                <div className="flex flex-col gap-3 *:flex-1 md:flex-row md:gap-x-4">
                   <MotorInput
                     stateHook={[motor, setMotor]}
                     testId="motor"
@@ -724,7 +726,7 @@ export default function Flywheel() {
                     testId="efficiency"
                     labelAbove
                   />
-                </IOLine>
+                </div>
                 <IOLine>
                   <RatioInput
                     stateHook={[ratio, setRatio]}
@@ -812,7 +814,7 @@ export default function Flywheel() {
 
               {/* Shooter Wheel */}
               <div className="flex flex-col gap-3 p-4">
-                <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                   <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                     Shooter Wheel
                   </h2>
@@ -1249,7 +1251,7 @@ export default function Flywheel() {
               <div className="border-t" />
 
               {/* Feedforward constants + Effective MOI */}
-              <div className="grid grid-cols-3 gap-2 p-4">
+              <div className="grid grid-cols-1 gap-2 p-4 md:grid-cols-3">
                 <MeasurementDisplayOutput
                   state={feedforwardGains.kV}
                   label="kV"
@@ -1272,7 +1274,7 @@ export default function Flywheel() {
               <div className="border-t" />
 
               {/* Feedback Gain */}
-              <div className="grid grid-cols-3 gap-2 p-4">
+              <div className="grid grid-cols-1 gap-2 p-4">
                 <MeasurementDisplayOutput
                   state={feedbackGains.kP}
                   label="Feedback kP"
@@ -1357,7 +1359,7 @@ export default function Flywheel() {
 
       {optimizationEnabled && (
         <div className="flex flex-col gap-4 px-1">
-          <div className="flex flex-row flex-wrap gap-4">
+          <div className="flex flex-col gap-4 md:flex-row">
             <div className="min-w-0 flex-1">
               <OptimalConfigGrid
                 configOptResult={configOptResult}
@@ -1367,7 +1369,7 @@ export default function Flywheel() {
                 onSelectCell={setSelectedConfigCell}
               />
             </div>
-            <div className="flex w-64 shrink-0 flex-col gap-3">
+            <div className="flex w-full flex-col gap-3 md:w-64 md:shrink-0">
               <section className="flex flex-col gap-3 rounded-lg border p-4">
                 <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                   Settings
diff --git a/app/routes/intake.tsx b/app/routes/intake.tsx
index 45781b0fa..231239299 100644
--- a/app/routes/intake.tsx
+++ b/app/routes/intake.tsx
@@ -210,12 +210,16 @@ export default function Intake() {
                 {allRecommendedRatiosAndStallTorques
                   .sort((a, b) => b.stallTorque.sub(a.stallTorque).baseScalar)
                   .map((rts) => (
-                    <IOLine
+                    // Ratio and Stall Torque stack on mobile; side-by-side at md+.
+                    <div
                       key={rts.motor.identifier}
-                      className={cn({
-                        'rounded-md border border-green-400 px-2 py-2':
-                          rts.motor.eq(motor),
-                      })}
+                      className={cn(
+                        'flex flex-col gap-2 *:flex-1 md:flex-row md:gap-x-4',
+                        {
+                          'rounded-md border border-green-400 px-2 py-2':
+                            rts.motor.eq(motor),
+                        },
+                      )}
                     >
                       <NumberOutput
                         state={rts.ratio.asNumber()}
@@ -231,7 +235,7 @@ export default function Intake() {
                         roundTo={2}
                         testId={`${rts.motor.identifier}-stallTorque`}
                       />
-                    </IOLine>
+                    </div>
                   ))}
               </div>
             </div>
diff --git a/app/routes/linear.tsx b/app/routes/linear.tsx
index 91b4ae024..2c7ae57e2 100644
--- a/app/routes/linear.tsx
+++ b/app/routes/linear.tsx
@@ -28,6 +28,7 @@ import {
   CollapsibleTrigger,
 } from '~/components/ui/collapsible';
 import { Skeleton } from '~/components/ui/skeleton';
+import { useIsMobile } from '~/hooks/use-mobile';
 import { useQueryParams, useSerializedState } from '~/lib/hooks';
 import { buildCalculatorApp, buildJsonLd, buildWebPage } from '~/lib/jsonld';
 import { calculateGuessedLimits, calculateStallLoad } from '~/lib/math/linear';
@@ -155,6 +156,7 @@ const optimizerPool = getPool<typeof LinearOptimizerWorker>(optimizerWorkerUrl);
 
 export default function Linear() {
   const queryParams = useQueryParams(DEFAULT_PARAMS);
+  const isMobile = useIsMobile();
 
   const [motor, setMotor] = useState(queryParams.motor);
   const [travelDistance, setTravelDistance] = useState(
@@ -557,7 +559,7 @@ export default function Linear() {
         />
         <div className="flex flex-row flex-wrap gap-6 px-1">
           {/* Left column: inputs */}
-          <div className="flex min-w-75 flex-1 flex-col">
+          <div className="flex min-w-72 flex-1 flex-col">
             <section className="flex flex-col rounded-lg border">
               {/* Motor & Gearing section */}
               <div className="flex flex-col gap-3 p-4">
@@ -572,7 +574,9 @@ export default function Linear() {
                     tooltip="Enable for a cascading elevator. The simulation applies first-stage mechanics: half the travel distance and double the load."
                   />
                 </div>
-                <IOLine>
+                {/* Motor gets its own full-width row on mobile; pairs with
+                    Efficiency at md+. */}
+                <div className="flex flex-col gap-3 *:flex-1 md:flex-row md:gap-x-4">
                   <MotorInput
                     stateHook={[motor, setMotor]}
                     testId="motor"
@@ -585,7 +589,7 @@ export default function Linear() {
                     testId="efficiency"
                     labelAbove
                   />
-                </IOLine>
+                </div>
                 <IOLine>
                   <RatioInput
                     stateHook={[ratio, setRatio]}
@@ -781,7 +785,9 @@ export default function Linear() {
                         labelAbove
                       />
                     </IOLine>
-                    <IOLine>
+                    {/* Kalman inputs stack onto their own rows on mobile;
+                        three across at md+. */}
+                    <div className="flex flex-col gap-3 *:flex-1 md:flex-row md:gap-x-4">
                       <MeasurementInput
                         stateHook={[
                           kalmanFilterPositionStdDev,
@@ -812,7 +818,7 @@ export default function Linear() {
                         testId="kalmanFilterEncoderPositionStdDev"
                         labelAbove
                       />
-                    </IOLine>
+                    </div>
                   </div>
                 </CollapsibleContent>
               </Collapsible>
@@ -820,10 +826,10 @@ export default function Linear() {
           </div>
 
           {/* Right column: outputs + chart */}
-          <div className="flex min-w-75 flex-1 flex-col gap-4">
+          <div className="flex min-w-72 flex-1 flex-col gap-4">
             {/* Results + Chart + Feedforward as one card */}
             <section className="flex flex-col rounded-lg border">
-              <div className="grid grid-cols-3 gap-2 p-4">
+              <div className="grid grid-cols-1 gap-2 p-4 md:grid-cols-3">
                 {isSimulating ? (
                   <>
                     <div className="flex flex-col gap-1.5">
@@ -873,7 +879,12 @@ export default function Linear() {
                   <ChartContainer config={{}} className="min-h-50 w-full">
                     <LineChart
                       data={chartData}
-                      margin={{ top: 5, right: 20, bottom: 30, left: 20 }}
+                      margin={{
+                        top: 5,
+                        right: isMobile ? 5 : 20,
+                        bottom: 30,
+                        left: isMobile ? 0 : 20,
+                      }}
                     >
                       <CartesianGrid strokeDasharray="3 3" />
                       <XAxis
@@ -889,24 +900,32 @@ export default function Linear() {
                       />
                       <YAxis
                         yAxisId="left"
-                        label={{
-                          value: `Velocity (${travelDistance.units()}/s) / Current (A)`,
-                          angle: -90,
-                          position: 'insideLeft',
-                          offset: 15,
-                          style: { textAnchor: 'middle' },
-                        }}
+                        label={
+                          isMobile
+                            ? undefined
+                            : {
+                                value: `Velocity (${travelDistance.units()}/s) / Current (A)`,
+                                angle: -90,
+                                position: 'insideLeft',
+                                offset: 15,
+                                style: { textAnchor: 'middle' },
+                              }
+                        }
                       />
                       <YAxis
                         yAxisId="right"
                         orientation="right"
-                        label={{
-                          value: `Position (${travelDistance.units()})`,
-                          angle: 90,
-                          position: 'insideRight',
-                          offset: 15,
-                          style: { textAnchor: 'middle' },
-                        }}
+                        label={
+                          isMobile
+                            ? undefined
+                            : {
+                                value: `Position (${travelDistance.units()})`,
+                                angle: 90,
+                                position: 'insideRight',
+                                offset: 15,
+                                style: { textAnchor: 'middle' },
+                              }
+                        }
                       />
                       <Tooltip
                         formatter={(value) =>
@@ -965,7 +984,7 @@ export default function Linear() {
               </div>
 
               <div className="border-t" />
-              <div className="grid grid-cols-3 gap-2 p-4">
+              <div className="grid grid-cols-1 gap-2 p-4 md:grid-cols-3">
                 <MeasurementDisplayOutput
                   state={kA}
                   label="kA"
@@ -1023,7 +1042,7 @@ export default function Linear() {
 
       {optimizationEnabled && (
         <div className="flex flex-col gap-4 px-1">
-          <div className="flex flex-row flex-wrap gap-4">
+          <div className="flex flex-col gap-4 md:flex-row">
             {/* Optimal configuration grid */}
             <div className="min-w-0 flex-1">
               <OptimalConfigGrid
@@ -1036,7 +1055,7 @@ export default function Linear() {
             </div>
 
             {/* Right column: settings + selected config */}
-            <div className="flex w-64 shrink-0 flex-col gap-3">
+            <div className="flex w-full flex-col gap-3 md:w-64 md:shrink-0">
               <section className="flex flex-col gap-3 rounded-lg border p-4">
                 <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                   Settings
diff --git a/playwright-tests/chains.spec.ts b/playwright-tests/chains.spec.ts
index 1c2af93d7..bd5a7d97e 100644
--- a/playwright-tests/chains.spec.ts
+++ b/playwright-tests/chains.spec.ts
@@ -58,8 +58,7 @@ test.describe('Chain Calculator', () => {
   });
 
   test('should match snapshot with chain changed', async ({ page }) => {
-    await page.getByTestId('chainType').click();
-    await page.getByRole('option', { name: '#35' }).click();
+    await page.getByRole('button', { name: '#35' }).click();
     await page.waitForTimeout(100);
     expect(await page.getByTestId('entrypoint').ariaSnapshot()).toMatchSnapshot(
       {
diff --git a/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml
index 16cf0038d..fe0eb5c7c 100644
--- a/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#35"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.375"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml
index 5cf509bde..712e8ca2a 100644
--- a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "10"
+- spinbutton: "10"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml
index a4c022275..b48f9259f 100644
--- a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: ft
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml
index 359a061a5..92cc5e3af 100644
--- a/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "1"
diff --git a/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml
index 647b5c2e3..b13086e96 100644
--- a/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "1"
diff --git a/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml
index 6c470bfae..6dbbc8a78 100644
--- a/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml
index 11d5f9230..85e757344 100644
--- a/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml
index 5ffe3bd93..6c9ddd9e3 100644
--- a/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml
index f937130a7..95867b794 100644
--- a/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml
index 3f5989b79..30269df53 100644
--- a/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml
index 1f3a2fcc9..29f5eaa59 100644
--- a/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml
index f21ddc5c3..8497e58e1 100644
--- a/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml
index b0537a1fc..bbc3ec598 100644
--- a/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml
+++ b/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#25"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25"
+- combobox: in
 - switch "Allow Half Links"
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5"
+- spinbutton: "5"
 - combobox: in
 - text: Extra Center
 - spinbutton: "0"
diff --git a/playwright-tests/copy-link.spec.ts b/playwright-tests/copy-link.spec.ts
index 3b2ae5b9a..3089d72d8 100644
--- a/playwright-tests/copy-link.spec.ts
+++ b/playwright-tests/copy-link.spec.ts
@@ -51,8 +51,7 @@ test.describe('Copy Link', () => {
     await page.goto('/chains');
     await page.waitForLoadState('networkidle');
 
-    await page.getByTestId('chainType').click();
-    await page.getByRole('option', { name: '#35' }).click();
+    await page.getByRole('button', { name: '#35' }).click();
     await page.getByTestId('p1Teeth').fill('20');
     await page.getByTestId('p2Teeth').fill('40');
     await page.getByTestId('desiredCenter').fill('8');
diff --git a/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml b/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml
index 5a9fab7e2..19bcbbff1 100644
--- a/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml
+++ b/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml
@@ -3,11 +3,16 @@
   - img
   - img
   - text: Copy Link
-- text: Chain Type
-- combobox: "#35"
+- group:
+  - button "#25"
+  - button "#35"
+  - button "8mm"
+- text: Pitch
+- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.375"
+- combobox: in
 - switch "Allow Half Links" [checked]
 - text: Allow Half Links Desired Center
-- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "8"
+- spinbutton: "8"
 - combobox: in
 - text: Extra Center
 - spinbutton: "1"