fix(library): four polish fixes to the library UI

src/components/library/molecules/StepIndicator/StepIndicator.module.scss

@@ -103,7 +103,6 @@
   top: 18px;
   left: 46px;
   right: 46px;
-  width: 79.5%;
   height: 1px;
   background: var(--gray-100);
   overflow: hidden;

src/components/library/molecules/TagMultiSelect/TagMultiSelect.module.scss

@@ -8,25 +8,35 @@
   position: relative;
 }
 
+// Geometry mirrors the Dropdown trigger so the two fields read as one control
+// when they stack in a form: same height, padding, radius, and chevron divider.
 .trigger {
   width: 100%;
+  height: 44px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   background: var(--white);
   border: 1px solid var(--brown-border);
-  border-radius: 4px;
-  padding: 12px 16px;
+  border-radius: 8px;
+  padding: 0 0 0 12px;
   cursor: pointer;
+  transition: all 0.2s ease;
 
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  &.open {
+  &.open,
+  &:not(:disabled):hover {
     border-color: var(--brown);
+
+    .iconWrapper {
+      border-left: 1px solid var(--brown);
+    }
   }
 
   .placeholder {
@@ -35,13 +45,27 @@
     color: var(--black);
   }
 
+  .iconWrapper {
+    border-left: 1px solid var(--brown-border);
+    height: -webkit-fill-available;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .icon {
+    flex-shrink: 0;
     transform: rotate(90deg);
     transition: transform 0.2s ease;
 
     &.rotated {
       transform: rotate(-90deg);
     }
+
+    path {
+      fill: var(--brown);
+    }
   }
 }
 

src/components/library/molecules/TagMultiSelect/TagMultiSelect.tsx

@@ -67,11 +67,13 @@ export function TagMultiSelect(props: TagMultiSelectProps): JSX.Element {
           >
             {value.length > 0 ? `${value.length} selected` : placeholder}
           </Text>
-          <ArrowIcon
-            width={16}
-            height={16}
-            className={classNames(styles.icon, { [styles.rotated]: isOpen })}
-          />
+          <div className={styles.iconWrapper}>
+            <ArrowIcon
+              width={16}
+              height={16}
+              className={classNames(styles.icon, { [styles.rotated]: isOpen })}
+            />
+          </div>
         </button>
         {isOpen &&
           (!portal || menuPos) &&

src/components/library/organisms/InteractiveCover/coverHotspots.ts

@@ -123,11 +123,39 @@ const makeHotspot = (
 const lorem =
   'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus';
 
+// Hit boxes are sized to the glow silhouette each hotspot lights up, so the
+// whole building answers the pointer rather than just its roofline.
+//
+// Order matters: overlapping triggers share a z-index, so the last one declared
+// wins the pointer. The tree (house-2) is the backdrop the buildings sit in
+// front of, so it goes first and the buildings keep their own hover areas.
 export const coverHotspots: CoverHotspot[] = [
+  makeHotspot(
+    'house-2',
+    {
+      // The glow here traces the tree, not a building — hence the wide box.
+      hit: { left: 17.76, top: 0, width: 30.85, height: 55 },
+      highlight: {
+        src: '/library/images/hotspots/house-2.svg',
+        alt: '',
+        left: 17.98,
+        top: 0,
+        width: 47.06,
+      },
+      card: { left: 53.0, top: 19.01 },
+    },
+    {
+      libraryName: 'Sarah’s Library',
+      about: lorem,
+      bookCount: 88,
+      videoCount: 34,
+      songCount: 12,
+    },
+  ),
   makeHotspot(
     'house-1',
     {
-      hit: { left: 37.73, top: 11.9, width: 12.55, height: 35.9 },
+      hit: { left: 41.45, top: 20.02, width: 13.13, height: 29.79 },
       highlight: {
         src: '/library/images/hotspots/house-1.svg',
         alt: '',
@@ -145,36 +173,15 @@ export const coverHotspots: CoverHotspot[] = [
       songCount: 17,
     },
     {
-      hit: { left: 45.8, top: 11.9, width: 6 },
+      // The panorama art sits 0.33% lower here, matching the highlight offset.
+      hit: { top: 20.35 },
       highlight: { left: 45.6, top: 7.9 },
     },
   ),
-  makeHotspot(
-    'house-2',
-    {
-      hit: { left: 14.13, top: 2, width: 22.41, height: 60 },
-      highlight: {
-        src: '/library/images/hotspots/house-2.svg',
-        alt: '',
-        left: 17.98,
-        top: 0,
-        width: 47.06,
-      },
-      card: { left: 53.0, top: 19.01 },
-    },
-    {
-      libraryName: 'Sarah’s Library',
-      about: lorem,
-      bookCount: 88,
-      videoCount: 34,
-      songCount: 12,
-    },
-    { hit: { left: 34.7824, top: 0 } },
-  ),
   makeHotspot(
     'house-3',
     {
-      hit: { left: 27.58, top: 43, width: 12.7, height: 34 },
+      hit: { left: 31.13, top: 50.79, width: 15.57, height: 37.59 },
       highlight: {
         src: '/library/images/hotspots/house-3.svg',
         alt: '',
@@ -192,14 +199,14 @@ export const coverHotspots: CoverHotspot[] = [
       songCount: 9,
     },
     {
-      hit: { left: 41, top: 52, width: 7.096, height: 34 },
+      hit: { top: 49.79 },
       highlight: { left: 40.4, top: 17.5 },
     },
   ),
   makeHotspot(
     'house-4',
     {
-      hit: { left: 17.12, top: 57, width: 10.46, height: 17 },
+      hit: { left: 20.02, top: 61.73, width: 11.43, height: 22.42 },
       highlight: {
         src: '/library/images/hotspots/house-4.svg',
         alt: '',
@@ -217,15 +224,15 @@ export const coverHotspots: CoverHotspot[] = [
       songCount: 6,
     },
     {
-      hit: { left: 35.6, top: 66 },
+      hit: { top: 60.83 },
       highlight: { left: 35.552, top: 28 },
     },
   ),
   makeHotspot(
     'house-5',
     {
       // Leader line exits to the LEFT, so the card sits left of the lantern.
-      hit: { left: 61.94, top: 38, width: 8.96, height: 26 },
+      hit: { left: 65.44, top: 49.75, width: 8.59, height: 24.69 },
       highlight: {
         src: '/library/images/hotspots/house-5.svg',
         alt: '',
@@ -242,6 +249,5 @@ export const coverHotspots: CoverHotspot[] = [
       videoCount: 14,
       songCount: 4,
     },
-    { hit: { left: 57.7312, top: 44, width: 4.3008, height: 28 } },
   ),
 ];

src/components/library/organisms/Sidebar/Sidebar.module.scss

@@ -133,13 +133,15 @@
       display: flex;
       flex-wrap: wrap;
 
+      // 20px row + the wrapper's 12px padding = a 44px box.
       &.tagsEmpty {
-        height: 50px;
+        height: 20px;
         align-items: center;
       }
 
       .emptyTags {
         color: var(--gray-medium);
+        line-height: 20px;
       }
 
       .button {