init

components/elevation-chart.tsx

@@ -54,7 +54,7 @@ export function ElevationChart({ data, syncId }: Props) {
   };
 
   return (
-    <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
+    <div className="rounded-lg border border-muted/40 bg-surface p-4" style={{ minWidth: 0 }}>
       <div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
         <span>Profil wysokości</span>
         {hasPace && (
@@ -64,8 +64,9 @@ export function ElevationChart({ data, syncId }: Props) {
           </span>
         )}
       </div>
+      <div style={{ width: "100%", position: "relative", overflow: "hidden" }}>
       <ResponsiveContainer width="100%" height={110}>
-        <ComposedChart syncId={syncId} data={data} margin={{ top: 4, right: hasPace ? 52 : 8, left: 0, bottom: 0 }}>
+        <ComposedChart syncId={syncId} data={data} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id={`elev-${uid}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.25} />
@@ -98,7 +99,7 @@ export function ElevationChart({ data, syncId }: Props) {
               stroke="var(--color-sand)"
               opacity={0.5}
               fontSize={11}
-              width={50}
+              width={62}
               tickFormatter={fmtPace}
               domain={[minPace - pacePad, maxPace + pacePad]}
             />
@@ -136,6 +137,7 @@ export function ElevationChart({ data, syncId }: Props) {
           )}
         </ComposedChart>
       </ResponsiveContainer>
+      </div>
     </div>
   );
 }