Fix spotlight tile regressions

The buttons were scrolling with the view instead of always being visible in a fixed location on the tile, and the indicators were not adopting the correct width.

Author: robintown

src/tile/SpotlightTile.module.css

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.tile {
+.contents {
+  block-size: 100%;
+  inline-size: 100%;
   display: flex;
   border-radius: var(--cpd-space-6x);
   contain: strict;
@@ -29,7 +31,7 @@ limitations under the License.
   scroll-behavior: smooth; */
 }
 
-.tile.maximised {
+.tile.maximised .contents {
   border-radius: 0;
 }
 
@@ -153,7 +155,7 @@ limitations under the License.
 }
 
 .indicators > .item {
-  inline-size: 32px;
+  flex-basis: 32px;
   block-size: 2px;
   transition: background-color ease 0.15s;
 }

src/tile/SpotlightTile.tsx

@@ -272,16 +272,18 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             <ChevronLeftIcon aria-hidden width={24} height={24} />
           </button>
         )}
-        {vms.map((vm) => (
-          <SpotlightItem
-            key={vm.id}
-            vm={vm}
-            targetWidth={targetWidth}
-            targetHeight={targetHeight}
-            intersectionObserver={intersectionObserver}
-            snap={scrollToId === null || scrollToId === vm.id}
-          />
-        ))}
+        <div className={styles.contents}>
+          {vms.map((vm) => (
+            <SpotlightItem
+              key={vm.id}
+              vm={vm}
+              targetWidth={targetWidth}
+              targetHeight={targetHeight}
+              intersectionObserver={intersectionObserver}
+              snap={scrollToId === null || scrollToId === vm.id}
+            />
+          ))}
+        </div>
         {onToggleExpanded && (
           <button
             className={classNames(styles.expand)}
@@ -311,7 +313,11 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             })}
           >
             {vms.map((vm) => (
-              <div className={styles.item} data-visible={vm.id === visibleId} />
+              <div
+                key={vm.id}
+                className={styles.item}
+                data-visible={vm.id === visibleId}
+              />
             ))}
           </div>
         )}