fix: selection card wiggle (#2047)

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;

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -177,16 +177,12 @@ const ComponentBlock = ({ block, preview, 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>

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
     }
   }