fix: loading claw pincers clipped when opening — expand SVG viewBox + remove overflow-hidden

This commit is contained in:
kuannnn
2026-03-26 10:44:21 +08:00
parent 42861ea7fa
commit a691b81a99
+5 -5
View File
@@ -6,9 +6,9 @@ import { cn } from '@/lib/utils';
*/
const sizeConfig = {
sm: { svgW: 24, svgH: 18, dotSize: 3, dotGap: 5, dots: 3, height: 'h-8' },
md: { svgW: 48, svgH: 36, dotSize: 4, dotGap: 8, dots: 5, height: 'h-12' },
lg: { svgW: 64, svgH: 48, dotSize: 5, dotGap: 10, dots: 6, height: 'h-16' },
sm: { svgW: 28, svgH: 24, dotSize: 3, dotGap: 5, dots: 3, height: 'h-10' },
md: { svgW: 56, svgH: 48, dotSize: 4, dotGap: 8, dots: 5, height: 'h-14' },
lg: { svgW: 72, svgH: 60, dotSize: 5, dotGap: 10, dots: 6, height: 'h-20' },
} as const;
interface Props {
@@ -22,7 +22,7 @@ function PixelClaw({ width, height }: { width: number; height: number }) {
<svg
width={width}
height={height}
viewBox="0 0 8 6"
viewBox="-1 -2 10 10"
style={{ imageRendering: 'pixelated' }}
className="claw-svg"
>
@@ -48,7 +48,7 @@ export function LoadingAnimation({ size = 'md', label, className }: Props) {
return (
<div className={cn('flex flex-col items-center gap-3', className)}>
<div className={cn('relative flex items-center justify-center overflow-hidden', cfg.height)}>
<div className={cn('relative flex items-center justify-center', cfg.height)}>
<div className="flex items-center">
{/* Claw walks right */}
<div className="claw-walk">