From 2fab18e289bdb2b1b767f05a307729d0a0d1c002 Mon Sep 17 00:00:00 2001
From: Utkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:33:48 +0530
Subject: [PATCH] fix(web): show unlinked icon when viewport aspect ratio is
 unlocked (#6509)

---
 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 f20ab0b37109e82a900f8ba78fe896c34525284b..cd33bd216d871d354cb46e044a4faa928aa5e33f 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"
-- 
2.54.0