From fffa9e2566b0cbe7eec38f410fb5e6bedcce39ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 29 May 2025 15:54:02 -0300
Subject: [PATCH] fix: selection card wiggle (#2045)

Removes the library cards' resize because of the border change on selection.
---
 .../components/BaseCard.scss                  | 23 +++----------
 .../units/LibraryUnitBlocks.tsx               |  6 +---
 src/library-authoring/units/index.scss        | 32 ++++++++-----------
 3 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/src/library-authoring/components/BaseCard.scss b/src/library-authoring/components/BaseCard.scss
index 84f0453c8..5208ea221 100644
--- a/src/library-authoring/components/BaseCard.scss
+++ b/src/library-authoring/components/BaseCard.scss
@@ -8,21 +8,11 @@
     }
 
     &.selected:not(:focus) {
-      border: 2px $gray-700 solid;
-
-      .library-item-header {
-        border-top-left-radius: calc(.375rem - 2px);
-        border-top-right-radius: calc(.375rem - 2px);
-      }
+      outline: 2px $gray-700 solid;
     }
 
     &.selected:focus {
-      border: 3px $gray-700 solid;
-
-      .library-item-header {
-        border-top-left-radius: calc(.375rem - 3px);
-        border-top-right-radius: calc(.375rem - 3px);
-      }
+      outline: 3px $gray-700 solid;
     }
 
     &:not(.selected):focus {
@@ -30,15 +20,10 @@
       outline-offset: 2px;
     }
 
-    &:not(.selected) {
-      .library-item-header {
-        border-top-left-radius: .375rem;
-        border-top-right-radius: .375rem;
-      }
-    }
-
     .library-item-header {
       padding: 0 .5rem 0 1.25rem;
+      border-top-left-radius: .375rem;
+      border-top-right-radius: .375rem;
 
       .library-item-header-icon {
         width: 2.3rem;
diff --git a/src/library-authoring/units/LibraryUnitBlocks.tsx b/src/library-authoring/units/LibraryUnitBlocks.tsx
index e4b3af980..e2d654cac 100644
--- a/src/library-authoring/units/LibraryUnitBlocks.tsx
+++ b/src/library-authoring/units/LibraryUnitBlocks.tsx
@@ -176,16 +176,12 @@ const ComponentBlock = ({ block, readOnly, isDragging }: ComponentBlockProps) =>
         maxHeight: '200px',
         overflowY: 'hidden',
       };
-    } if (componentId === block.originalId) {
-      return {
-        outline: '2px solid black',
-      };
     }
     return {};
   }, [isDragging, componentId, block]);
 
   const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.ComponentInfo
-    && sidebarComponentInfo?.id === block.id;
+    && sidebarComponentInfo?.id === block.originalId;
 
   return (
     <IframeProvider>
diff --git a/src/library-authoring/units/index.scss b/src/library-authoring/units/index.scss
index 4a8c2904b..749e60b44 100644
--- a/src/library-authoring/units/index.scss
+++ b/src/library-authoring/units/index.scss
@@ -5,22 +5,6 @@
     margin-bottom: 1rem;
     border: solid 1px $light-500;
 
-    &::before {
-      border: none !important; // Remove default focus
-    }
-
-    &.selected:not(:focus) {
-      border: 2px $gray-700 solid;
-    }
-
-    &.selected:focus {
-      border: 3px $gray-700 solid;
-    }
-
-    &:not(.selected):focus {
-      outline: 1px $gray-200 solid;
-      outline-offset: 2px;
-    }
   }
 
   .pgn__card.clickable {
@@ -31,11 +15,23 @@
     &:focus {
       // this is required for clicks to be passed to underlying iframe component
       pointer-events: none;
-      outline: solid 1px $dark-500;
+    }
+
+    &.selected:not(:focus) {
+      outline: 2px $gray-700 solid;
+    }
+
+    &.selected:focus {
+      outline: 3px $gray-700 solid;
+    }
+
+    &:not(.selected):focus {
+      outline: 1px $gray-200 solid;
+      outline-offset: 2px;
     }
 
     &::before {
-      border: none;
+      border: none !important; // Remove default focus
     }
   }