fix: selection card wiggle (#2047)

Author: rpenido

src/library-authoring/components/BaseCard.scss

@@ -8,37 +8,22 @@
     }
 
     &.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 {
       outline: 1px $gray-200 solid;
       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,37 +5,33 @@
     margin-bottom: 1rem;
     border: solid 1px $light-500;
 
-    &::before {
-      border: none !important; // Remove default focus
+  }
+
+  .pgn__card.clickable {
+    box-shadow: none;
+    // this is required for clicks to be captured by card and iframe when it is not in focus
+    pointer-events: auto;
+
+    &:focus {
+      // this is required for clicks to be passed to underlying iframe component
+      pointer-events: none;
     }
 
     &.selected:not(:focus) {
-      border: 2px $gray-700 solid;
+      outline: 2px $gray-700 solid;
     }
 
     &.selected:focus {
-      border: 3px $gray-700 solid;
+      outline: 3px $gray-700 solid;
     }
 
     &:not(.selected):focus {
       outline: 1px $gray-200 solid;
       outline-offset: 2px;
     }
-  }
-
-  .pgn__card.clickable {
-    box-shadow: none;
-    // this is required for clicks to be captured by card and iframe when it is not in focus
-    pointer-events: auto;
-
-    &:focus {
-      // this is required for clicks to be passed to underlying iframe component
-      pointer-events: none;
-      outline: solid 1px $dark-500;
-    }
 
     &::before {
-      border: none;
+      border: none !important; // Remove default focus
     }
   }