overlay

web/packages/new/photos/components/Gallery/BarImpl.tsx

@@ -1,6 +1,6 @@
 import { useIsMobileWidth } from "@/base/hooks";
 import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions";
-import { BarItemTile, ItemCard } from "@/new/photos/components/ItemCards";
+import { BarItemTile, ItemCard, TileTextOverlay } from "@/new/photos/components/ItemCards";
 import {
     FilledIconButton,
     UnstyledButton,
@@ -498,20 +498,11 @@ interface CardTextProps {
 }
 
 const CardText: React.FC<CardTextProps> = ({ text }) => (
-    <CardText_>
+    <TileTextOverlay>
         <TruncatedText {...{ text }} />
-    </CardText_>
+    </TileTextOverlay>
 );
 
-const CardText_ = styled(Overlay)`
-    padding: 4px;
-    background: linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.1) 0%,
-        rgba(0, 0, 0, 0.5) 86.46%
-    );
-`;
-
 const TruncatedText: React.FC<CardTextProps> = ({ text }) => (
     <Tooltip title={text}>
         <Box height={"2.1em"} overflow="hidden">

web/packages/new/photos/components/ItemCards.tsx

@@ -63,9 +63,13 @@ export const ItemCard: React.FC<React.PropsWithChildren<ItemCardProps>> = ({
 /**
  * A generic "base" tile, meant to be used (after setting dimensions) as the
  * {@link TileComponent} provided to an {@link ItemCard}.
+ *
+ * Use {@link ItemTileOverlay} (usually via one of its presets) to overlay
+ * content on top of the tile.
  */
 export const ItemTile = styled("div")`
     display: flex;
+    /* Act as container for the absolutely positioned ItemTileOverlays. */
     position: relative;
     border-radius: 4px;
     overflow: hidden;
@@ -104,3 +108,29 @@ export const AllCollectionTile = styled(ItemTile)`
     width: 150px;
     height: 150px;
 `;
+
+/**
+ * An empty overlay on top of the nearest relative positioned ancestor.
+ *
+ * This is meant to be used in tandem with {@link ItemTile}.
+ */
+export const ItemTileOverlay = styled("div")`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+`;
+
+/**
+ * An {@link ItemTileOverlay} suitable for hosting textual content for small and
+ * medium sized tiles.
+ */
+export const TileTextOverlay = styled(ItemTileOverlay)`
+    padding: 4px;
+    background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.5) 86.46%
+    );
+`;