From 7ec6c733256090e9bd4539945c824b06a3fb239a Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Sat, 21 Dec 2024 17:14:22 +0300
Subject: [PATCH] fix: Instance outline is rendered above style panel (#4632)

## Description

closes #4629

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../features/workspace/canvas-tools/outline/outline.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
index 105c6f985f9d..94014adee5d3 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
@@ -111,6 +111,10 @@ export const Outline = ({
       Math.min(rect.left + rect.width, clampingRect.left + clampingRect.width) -
       Math.max(rect.left, clampingRect.left),
   };
+  const dynamicStyle = useDynamicStyle(outlineRect);
+  if (outlineRect.width <= 0 || outlineRect.height <= 0) {
+    return;
+  }
 
   const isLeftClamped = rect.left < outlineRect.left;
   const isTopClamped = rect.top < outlineRect.top;
@@ -121,8 +125,6 @@ export const Outline = ({
   const isBottomClamped =
     Math.round(rect.top + rect.height) > Math.round(clampingRect.height);
 
-  const dynamicStyle = useDynamicStyle(outlineRect);
-
   return (
     <>
       {propertyStyle}