# Files changed · PR \#20 · screen/col

[View on GitCafe](https://git.cafe/screen/col/pull/20/diffs)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

[Fix bento card layout and preview overlap](https://git.cafe/screen/col/pull/20.md)

Version: 0

Head commit: 37ddfc6a72ab355ac72d5bf2ad87d480929e9954

Base commit: 0b0a365af7c2f51c0a49b513385be47f2bc6d61f

Comparison base: 0b0a365af7c2f51c0a49b513385be47f2bc6d61f

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## app/globals.css

Status: modified; +1; −1

```diff
@@ -250,7 +250,7 @@
 .bento-card-title { color: #fff; }
 .bento-card-description { color: rgba(255,255,255,.7); }
 .bento-card-cta { color: #8be5ef; }
-.bento-preview { border-color: rgba(136,213,223,.14); background: #11191b; mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
+.bento-preview { border-color: rgba(136,213,223,.14); background: #11191b; }
 .bento-preview-chip { border-color: rgba(136,213,223,.16); color: rgba(255,255,255,.72); }
 .bento-preview-chip-active { border-color: rgba(119,220,233,.4); background: rgba(43,187,205,.13); color: #d7faff; }
 html.light .magic-bento-card { border-color: rgba(17,17,17,.1); background: #fff; box-shadow: 0 2px 10px rgba(17,17,17,.05); }
```

## components/LibraryExplorer.tsx

Status: modified; +12; −5

```diff
@@ -72,11 +72,18 @@
 
   useEffect(() => {
     const root = document.documentElement;
+    const desktop = window.matchMedia("(min-width: 768px)");
+    const syncShader = () => {
+      setShaderTheme(desktop.matches ? (root.classList.contains("light") ? "light" : "dark") : null);
+    };
+    const observer = new MutationObserver(syncShader);
-    const syncTheme = () => setShaderTheme(root.classList.contains("light") ? "light" : "dark");
-    const observer = new MutationObserver(syncTheme);
-    syncTheme();
+    syncShader();
     observer.observe(root, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
+    desktop.addEventListener("change", syncShader);
+    return () => {
+      observer.disconnect();
+      desktop.removeEventListener("change", syncShader);
+    };
   }, []);
 
   const openLibrary = (search: string) => {
@@ -164,7 +171,7 @@
         href="https://openshaders.com/@screendev"
         target="_blank"
         rel="noopener noreferrer"
-        className="hero-shader-credit absolute bottom-4 right-5 z-10 text-[10px] tracking-[0.02em] sm:right-8"
+        className="hero-shader-credit absolute bottom-4 right-5 z-10 hidden text-[10px] tracking-[0.02em] md:block md:right-8"
       >
         Background shader by @screendev on OpenShaders
       </a>
```

## components/WhatsInsideSection.tsx

Status: modified; +9; −9

```diff
@@ -17,7 +17,7 @@
     href: "/libraries",
     cta: "Browse libraries",
     background: (
-      <div className="bento-preview absolute inset-x-4 top-4 rounded-lg border p-3">
+      <div className="bento-preview rounded-lg border p-3">
         {featuredLibraries.map((library) => (
           <div key={library.slug} className="theme-border flex items-center gap-3 border-b py-3 last:border-0">
             <LibraryLogo url={library.url} name={library.name} size={26} />
@@ -35,11 +35,11 @@
     href: "/libraries#library-search",
     cta: "Search libraries",
     background: (
+      <div className="bento-preview rounded-lg border p-4">
-      <div className="bento-preview absolute inset-x-5 top-5 rounded-lg border p-4">
         <div className="theme-border theme-control flex h-11 items-center gap-3 rounded-md border px-3">
           <Search className="theme-muted size-4" />
+          <span className="theme-muted min-w-0 truncate text-sm">dashboard accessibility</span>
-          <span className="theme-muted text-sm">dashboard accessibility</span>
-          <kbd className="theme-muted ml-auto text-xs">⌘ K</kbd>
+          <kbd className="theme-muted ml-auto shrink-0 text-xs">⌘ K</kbd>
         </div>
         <div className="mt-4 flex flex-wrap gap-2">
           {STACKS.slice(0, 4).map((stack, index) => (
@@ -56,11 +56,11 @@
     href: "/libraries",
     cta: "Explore categories",
     background: (
-      <div className="bento-preview absolute inset-x-5 top-5 grid grid-cols-2 gap-2 rounded-lg border p-4 sm:grid-cols-3">
+      <div className="bento-preview grid grid-cols-2 gap-2 rounded-lg border p-4">
         {CATEGORIES.slice(0, 4).map((category) => (
           <div key={category} className="bento-preview-chip theme-muted flex min-w-0 items-center gap-2 rounded-md border px-3 py-3 text-xs">
             <Layers3 className="size-4 shrink-0" />
+            <span className="min-w-0 break-words">{category}</span>
-            <span className="truncate">{category}</span>
           </div>
         ))}
       </div>
@@ -73,7 +73,7 @@
     href: sourceLibrary?.url ?? "/libraries",
     cta: "Visit a project",
     background: sourceLibrary ? (
-      <div className="bento-preview absolute inset-x-4 top-5 rounded-lg border p-4">
+      <div className="bento-preview rounded-lg border p-4">
         <div className="flex items-center gap-3">
           <LibraryLogo url={sourceLibrary.url} name={sourceLibrary.name} size={32} />
           <div className="min-w-0">
@@ -94,7 +94,7 @@
     description: "Each library will have its own page, plus agent-specific setup guides.",
     status: "In progress",
     background: detailLibrary ? (
-      <div className="bento-preview absolute inset-x-5 top-5 rounded-lg border p-4">
+      <div className="bento-preview rounded-lg border p-4">
         <div className="flex items-center gap-3">
           <LibraryLogo url={detailLibrary.url} name={detailLibrary.name} size={32} />
           <div className="min-w-0">
@@ -121,7 +121,7 @@
     description: "Find libraries from your AI tools with a Col MCP connector.",
     status: "Coming soon",
     background: (
-      <div className="bento-preview absolute inset-x-4 top-5 rounded-lg border p-4">
+      <div className="bento-preview rounded-lg border p-4">
         <p className="theme-text text-sm font-semibold">Col MCP</p>
         <div className="theme-border mt-4 flex items-center gap-3 border-t pt-4">
           <span className="bento-preview-chip rounded-md border px-2 py-1 text-xs">AI tool</span>
```

## components/ui/bento-grid.tsx

Status: modified; +7; −12

```diff
@@ -21,7 +21,7 @@
 // Magic UI Bento Grid: https://magicui.design/docs/components/bento-grid
 function BentoGrid({ children, className, ...props }: BentoGridProps) {
   return (
-    <div className={cn("grid w-full auto-rows-[22rem] grid-cols-1 gap-4 sm:auto-rows-[18rem] sm:grid-cols-2 lg:grid-cols-3", className)} {...props}>
+    <div className={cn("grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", className)} {...props}>
       {children}
     </div>
   );
@@ -32,28 +32,23 @@
 
   return (
     <div
+      className={cn("magic-bento-card group relative col-span-1 flex min-w-0 flex-col overflow-hidden rounded-xl", className)}
-      className={cn("magic-bento-card group relative col-span-1 flex transform-gpu flex-col justify-between overflow-hidden rounded-xl", className)}
       {...props}
     >
-      <div aria-hidden="true">{background}</div>
+      <div aria-hidden="true" className="min-w-0 p-4 pb-6">{background}</div>
+      <div className="relative z-10 mt-auto p-4 pt-0">
+        <div className="flex flex-col gap-1">
-      <div className="relative z-10 p-4">
+          <Icon className="bento-card-icon h-9 w-9" />
-        <div className={cn("pointer-events-none flex transform-gpu flex-col gap-1 transition-transform duration-300", href && cta && "lg:group-hover:-translate-y-10")}>
-          <Icon className="bento-card-icon h-9 w-9 origin-left transform-gpu transition-transform duration-300 ease-in-out group-hover:scale-75" />
           <h3 className="bento-card-title text-xl font-semibold">{name}</h3>
           <p className="bento-card-description max-w-lg">{description}</p>
           {status && <span className="bento-card-cta mt-2 text-sm font-medium">{status}</span>}
         </div>
+        {href && cta && <div className="mt-3 flex items-center">
-        {href && cta && <div className="mt-3 flex items-center lg:hidden">
           <Button variant="link" asChild size="sm" className="bento-card-cta h-auto p-0">
             <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>{cta}<ArrowRightIcon className="ms-2 size-4" aria-hidden /></a>
           </Button>
         </div>}
       </div>
-      {href && cta && <div className="pointer-events-none absolute bottom-0 z-20 hidden w-full translate-y-10 items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:flex">
-        <Button variant="link" asChild size="sm" className="bento-card-cta pointer-events-auto h-auto p-0">
-          <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>{cta}<ArrowRightIcon className="ms-2 size-4" aria-hidden /></a>
-        </Button>
-      </div>}
       <div className="pointer-events-none absolute inset-0 transition-colors duration-300 group-hover:bg-cyan-300/5" />
     </div>
   );
```