From 207a5886685b401b7a5a290d2057c44e1834ffc8 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Thu, 13 Aug 2026 23:59:10 +0530
Subject: [PATCH] fix(web): show unlinked icon when viewport aspect ratio is
 unlocked

---
 apps/web/src/browser/BrowserDeviceToolbar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/browser/BrowserDeviceToolbar.tsx b/apps/web/src/browser/BrowserDeviceToolbar.tsx
index f20ab0b37109..cd33bd216d87 100644
--- a/apps/web/src/browser/BrowserDeviceToolbar.tsx
+++ b/apps/web/src/browser/BrowserDeviceToolbar.tsx
@@ -7,7 +7,7 @@ import {
   type PreviewViewportSetting,
 } from "@t3tools/contracts";
 import { PREVIEW_VIEWPORT_PRESETS, resolvePreviewViewport } from "@t3tools/shared/previewViewport";
-import { Link2, X } from "lucide-react";
+import { Link2, Unlink2, X } from "lucide-react";
 import { useState } from "react";
 
 import { Button } from "~/components/ui/button";
@@ -310,7 +310,11 @@ export function BrowserDeviceToolbar({
         onPointerDown={(event) => event.preventDefault()}
         onClick={toggleAspectRatio}
       >
-        <Link2 className={cn(aspectRatio !== null && "text-foreground")} />
+        {aspectRatio === null ? (
+          <Unlink2 className={cn(aspectRatio !== null && "text-foreground")} />
+        ) : (
+          <Link2 className={cn(aspectRatio !== null && "text-foreground")} />
+        )}
       </Button>
       <Button
         variant="ghost"