From 767cffd9314d2f08392f1c1b55af1b9e29cdff3a Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 14:34:12 -0600
Subject: [PATCH 1/7] Subtle improvements

---
 src/elements/components/model-card.module.scss | 5 +++++
 src/elements/components/model-card.tsx         | 4 ++--
 src/pages/index.tsx                            | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/elements/components/model-card.module.scss b/src/elements/components/model-card.module.scss
index c35e635d..dd458be1 100644
--- a/src/elements/components/model-card.module.scss
+++ b/src/elements/components/model-card.module.scss
@@ -9,9 +9,14 @@
     border-radius: 0.5rem;
     border-width: 1px;
     border-style: solid;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 
     --inner-radius: calc(0.5rem - 1px);
 
+    &:hover {
+        transform: scale(1.02);
+    }
+
     &.overflowHidden {
         --inner-radius: 0;
 
diff --git a/src/elements/components/model-card.tsx b/src/elements/components/model-card.tsx
index 7b59d0d8..9f8538db 100644
--- a/src/elements/components/model-card.tsx
+++ b/src/elements/components/model-card.tsx
@@ -257,7 +257,7 @@ const useMakeLazyCard = (lazy: boolean, card: JSX.Element) => {
             className={joinClasses(
                 style.modelCard,
                 !editMode && style.overflowHidden,
-                'border-gray-300 bg-white shadow-lg hover:shadow-xl dark:border-gray-700 dark:bg-fade-900'
+                'border-gray-300 bg-white shadow-lg hover:shadow-2xl dark:border-gray-700 dark:bg-fade-900'
             )}
         >
             {card}
@@ -270,7 +270,7 @@ const useMakeLazyCard = (lazy: boolean, card: JSX.Element) => {
         <LazyLoadComponent
             placeholder={
                 <div
-                    className={`${style.modelCard} border-gray-300 bg-white shadow-lg hover:shadow-xl dark:border-gray-700 dark:bg-fade-900`}
+                    className={`${style.modelCard} border-gray-300 bg-white shadow-lg hover:shadow-2xl dark:border-gray-700 dark:bg-fade-900`}
                 />
             }
         >
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 63ab9ec5..85bdc462 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -133,8 +133,12 @@ export default function Page({ modelData: staticModelData }: Props) {
                     </p>
                 </div>
 
-                <h1 className="mb-4 text-center text-2xl font-bold capitalize text-accent-500 dark:text-fade-200 md:mb-6 lg:text-3xl">
-                    The best place to find AI Upscaling models
+                <h1 className="mb-4 text-center text-4xl font-extrabold md:mb-6 md:text-5xl lg:text-6xl">
+                    <span className="text-gray-800 dark:text-gray-100">The best place to find </span>
+                    <span className="bg-gradient-to-r from-accent-400 via-accent-500 to-accent-600 bg-clip-text text-transparent">
+                        AI Upscaling
+                    </span>
+                    <span className="text-gray-800 dark:text-gray-100"> models</span>
                 </h1>
 
                 <p className="mx-auto max-w-screen-md text-center text-gray-600 dark:text-gray-400 md:text-lg">

From 52321bc1971b065a79a532e914b2711325a6fc21 Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 14:39:41 -0600
Subject: [PATCH 2/7] Update font

---
 src/pages/_app.tsx      | 29 ++++++++++++++++++++++-------
 src/styles/globals.scss |  8 ++++----
 tailwind.config.js      |  3 +++
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 81e39a49..95c38654 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,5 @@
+import { Inter } from 'next/font/google';
+import { useEffect } from 'react';
 import '../styles/globals.scss';
 import 'react-tooltip/dist/react-tooltip.css';
 import { DevicePixelRatioProvider } from '../lib/hooks/use-device-pixel-ratio';
@@ -5,14 +7,27 @@ import { TooltipProvider } from '../lib/hooks/use-tooltip';
 import { WebApiProvider } from '../lib/hooks/use-web-api';
 import type { AppProps } from 'next/app';
 
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-inter',
+    display: 'swap',
+});
+
 export default function App({ Component, pageProps }: AppProps) {
+    useEffect(() => {
+        // Ensure the font variable is available on the root element
+        document.documentElement.style.setProperty('--font-inter', inter.style.fontFamily);
+    }, []);
+
     return (
-        <WebApiProvider>
-            <DevicePixelRatioProvider>
-                <TooltipProvider>
-                    <Component {...pageProps} />
-                </TooltipProvider>
-            </DevicePixelRatioProvider>
-        </WebApiProvider>
+        <div className={inter.variable}>
+            <WebApiProvider>
+                <DevicePixelRatioProvider>
+                    <TooltipProvider>
+                        <Component {...pageProps} />
+                    </TooltipProvider>
+                </DevicePixelRatioProvider>
+            </WebApiProvider>
+        </div>
     );
 }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4c021e3c..398e6ca1 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -50,10 +50,10 @@
 :root {
     --max-page-width: 1400px;
 
-    --fonts-heading: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji',
-        'Segoe UI Emoji', 'Segoe UI Symbol';
-    --fonts-body: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji',
-        'Segoe UI Emoji', 'Segoe UI Symbol';
+    --fonts-heading: var(--font-inter), -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --fonts-body: var(--font-inter), -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     --fonts-mono: sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
 
     overflow-y: scroll;
diff --git a/tailwind.config.js b/tailwind.config.js
index 91f5140d..46f0fbf0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
     content: ['./src/**/*.{js,ts,jsx,tsx}'],
     theme: {
         extend: {
+            fontFamily: {
+                sans: ['var(--font-inter)', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
+            },
             colors: {
                 'fade-50': '#f9f8ff',
                 'fade-100': '#f3f2fd',

From 7eaf3da5c4c19637b8e2dd308f52e7d0dff081a5 Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 14:47:18 -0600
Subject: [PATCH 3/7] increase size of image carousel

---
 .../components/image-carousel.module.scss     | 11 +++++++++
 src/elements/components/image-carousel.tsx    |  2 +-
 src/pages/models/[id].tsx                     | 24 +++++++++++--------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/elements/components/image-carousel.module.scss b/src/elements/components/image-carousel.module.scss
index 5289ff45..a1dbfdbf 100644
--- a/src/elements/components/image-carousel.module.scss
+++ b/src/elements/components/image-carousel.module.scss
@@ -1,7 +1,18 @@
 .imageWrapper {
+    height: 350px;
+
+    @media screen and (min-width: 768px) {
+        height: 450px;
+    }
+
+    @media screen and (min-width: 1024px) {
+        height: 500px;
+    }
+
     @media screen and (max-width: 1023px) {
         border-radius: 0;
         margin: -1rem 0 0 -1rem;
         width: calc(100% + 2rem);
+        height: 300px;
     }
 }
diff --git a/src/elements/components/image-carousel.tsx b/src/elements/components/image-carousel.tsx
index 91f683fb..bee8a0c6 100644
--- a/src/elements/components/image-carousel.tsx
+++ b/src/elements/components/image-carousel.tsx
@@ -47,7 +47,7 @@ export const ImageCarousel = ({ images, readonly, indexKey, onChange }: ImageCar
     return (
         <div className="relative w-full">
             <div
-                className={`${style.imageWrapper} flex h-96 w-full overflow-hidden rounded-lg bg-fade-100 align-middle dark:bg-fade-800`}
+                className={`${style.imageWrapper} flex w-full overflow-hidden rounded-lg bg-fade-100 align-middle dark:bg-fade-800`}
             >
                 {selectedImage ? (
                     <ImageCarouselImage image={selectedImage} />
diff --git a/src/pages/models/[id].tsx b/src/pages/models/[id].tsx
index 8fe2b5cc..d42e0534 100644
--- a/src/pages/models/[id].tsx
+++ b/src/pages/models/[id].tsx
@@ -437,16 +437,20 @@ export default function Page({
                 </Head>
             )}
             <PageContainer searchBar>
-                {/* Two columns */}
-                <div className="grid h-full w-full gap-4 pb-4 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-3">
-                    {/* Left column */}
+                {/* Full-width preview at top (YouTube-style) */}
+                <div className="mb-6 w-full">
+                    <ImageCarousel
+                        images={model.images}
+                        indexKey={modelId}
+                        readonly={!editMode}
+                        onChange={(images) => updateModelProperty('images', images)}
+                    />
+                </div>
+
+                {/* Two columns: Description and Sidebar */}
+                <div className="grid h-full w-full gap-6 pb-4 sm:grid-cols-1 lg:grid-cols-3">
+                    {/* Left column: Description */}
                     <div className="relative flex h-full flex-col gap-4 sm:col-span-1 lg:col-span-2">
-                        <ImageCarousel
-                            images={model.images}
-                            indexKey={modelId}
-                            readonly={!editMode}
-                            onChange={(images) => updateModelProperty('images', images)}
-                        />
                         <div className="relative">
                             <div>
                                 {editMode && (
@@ -564,7 +568,7 @@ export default function Page({
                             </div>
                         </div>
                     </div>
-                    {/* Right column */}
+                    {/* Right column: Sidebar */}
                     <div className="col-span-1 w-full">
                         {/* Download Button */}
                         <div className="mb-2 flex w-full flex-col gap-2">

From 323a176d6b523bf29b6fe2ba9afb28655925ead9 Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 14:50:22 -0600
Subject: [PATCH 4/7] improved sidebar styling

---
 src/pages/models/[id].tsx | 43 +++++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/pages/models/[id].tsx b/src/pages/models/[id].tsx
index d42e0534..3155e916 100644
--- a/src/pages/models/[id].tsx
+++ b/src/pages/models/[id].tsx
@@ -334,26 +334,33 @@ function isTrue<T>(value: T | null | undefined | false | '' | 0): value is T {
 }
 
 function MetadataTable({ rows }: { rows: (false | null | undefined | readonly [string, ReactNode])[] }) {
+    const filteredRows = rows.filter(isTrue);
     return (
-        <table className="w-full border-collapse text-left text-sm text-gray-700 dark:text-gray-400 ">
-            <tbody>
-                {rows.filter(isTrue).map((row, i) => {
-                    const [label, value] = row;
-                    const extraPadding = i === 0 ? 'pt-3' : i === rows.length - 1 ? 'pb-3' : '';
-                    return (
-                        <tr key={i}>
-                            <th
-                                className={`${extraPadding} whitespace-nowrap bg-fade-100 px-4 py-2 text-right align-top font-medium text-fade-900 dark:bg-fade-800 dark:text-white`}
-                                scope="row"
+        <div className="overflow-hidden rounded-lg border border-fade-200 bg-white dark:border-fade-700 dark:bg-fade-900">
+            <table className="w-full border-collapse text-left text-sm text-gray-700 dark:text-gray-400">
+                <tbody>
+                    {filteredRows.map((row, i) => {
+                        const [label, value] = row;
+                        const extraPadding = i === 0 ? 'pt-3' : i === filteredRows.length - 1 ? 'pb-3' : '';
+                        const isLastRow = i === filteredRows.length - 1;
+                        return (
+                            <tr
+                                className={!isLastRow ? 'border-b border-fade-200 dark:border-fade-700' : ''}
+                                key={i}
                             >
-                                {label}
-                            </th>
-                            <td className={`${extraPadding} px-4 py-2`}>{value}</td>
-                        </tr>
-                    );
-                })}
-            </tbody>
-        </table>
+                                <th
+                                    className={`${extraPadding} whitespace-nowrap bg-fade-100 px-4 py-2 text-right align-top font-medium text-fade-900 dark:bg-fade-800 dark:text-white`}
+                                    scope="row"
+                                >
+                                    {label}
+                                </th>
+                                <td className={`${extraPadding} px-4 py-2`}>{value}</td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+        </div>
     );
 }
 export default function Page({

From 50bbb765748e896a784319400c58e04d7db31eb3 Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 15:08:33 -0600
Subject: [PATCH 5/7] ensure popovers stay visible

---
 .../components/download-button-edit-popover.tsx     |  2 +-
 src/elements/components/editable-tags.tsx           |  2 +-
 .../components/image-carousel-edit-popover.tsx      |  2 +-
 src/elements/components/model-card.module.scss      | 13 ++++++++++++-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/elements/components/download-button-edit-popover.tsx b/src/elements/components/download-button-edit-popover.tsx
index c4f0d096..0ffcd942 100644
--- a/src/elements/components/download-button-edit-popover.tsx
+++ b/src/elements/components/download-button-edit-popover.tsx
@@ -196,7 +196,7 @@ export function EditResourceButton({
                 leaveTo="transform opacity-0 scale-95"
             >
                 <Popover.Panel
-                    className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                    className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
                         position === 'left' ? 'left-0' : 'right-0'
                     }`}
                 >
diff --git a/src/elements/components/editable-tags.tsx b/src/elements/components/editable-tags.tsx
index ac4b0494..dbd493c6 100644
--- a/src/elements/components/editable-tags.tsx
+++ b/src/elements/components/editable-tags.tsx
@@ -99,7 +99,7 @@ function EditTags({ tags, onChange }: { tags: readonly TagId[]; onChange: (value
                 leaveTo="transform opacity-0 scale-95"
             >
                 <Popover.Panel
-                    className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                    className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 text-sm shadow-lg focus:outline-none dark:bg-black ${
                         position === 'left' ? 'left-0' : 'right-0'
                     }`}
                 >
diff --git a/src/elements/components/image-carousel-edit-popover.tsx b/src/elements/components/image-carousel-edit-popover.tsx
index 529dff52..5c0c9c4a 100644
--- a/src/elements/components/image-carousel-edit-popover.tsx
+++ b/src/elements/components/image-carousel-edit-popover.tsx
@@ -202,7 +202,7 @@ export function EditImageButton({ image, onChange, children }: React.PropsWithCh
                     leaveTo="transform opacity-0 scale-95"
                 >
                     <Popover.Panel
-                        className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                        className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
                             position === 'left' ? 'left-0' : 'right-0'
                         }`}
                     >
diff --git a/src/elements/components/model-card.module.scss b/src/elements/components/model-card.module.scss
index dd458be1..c19189a7 100644
--- a/src/elements/components/model-card.module.scss
+++ b/src/elements/components/model-card.module.scss
@@ -10,11 +10,13 @@
     border-width: 1px;
     border-style: solid;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+    z-index: 1;
 
     --inner-radius: calc(0.5rem - 1px);
 
     &:hover {
         transform: scale(1.02);
+        z-index: 10;
     }
 
     &.overflowHidden {
@@ -23,6 +25,12 @@
         overflow: hidden;
     }
 
+    // Ensure popovers can escape the card's bounds when open
+    &:has([data-headlessui-state='open']) {
+        overflow: visible;
+        z-index: 100;
+    }
+
     .inner {
         position: relative;
         display: flex;
@@ -65,6 +73,9 @@
     .details {
         padding: 0.75rem;
         padding-top: 0;
+        overflow: visible;
+        position: relative;
+        z-index: 10;
 
         &.paired {
             position: absolute;
@@ -73,7 +84,7 @@
             right: 0;
             backdrop-filter: blur(2rem) saturate(2);
             border-radius: 0 0 var(--inner-radius) var(--inner-radius);
-            overflow: hidden;
+            overflow: visible;
 
             @include themed using($t) {
                 background: linear-gradient(transparent, t($t, white, $fade-900))

From 9f1d875b98caeff333612d24e8dae30cfa63d9fe Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 15:12:25 -0600
Subject: [PATCH 6/7] Fix loading issues for image comparisons

---
 .../components/carousel/comparison.tsx        | 61 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/elements/components/carousel/comparison.tsx b/src/elements/components/carousel/comparison.tsx
index 523f3626..369287c2 100644
--- a/src/elements/components/carousel/comparison.tsx
+++ b/src/elements/components/carousel/comparison.tsx
@@ -19,6 +19,7 @@ export const ImageComparison = ({ image }: ImageComparisonProps) => {
         scale: 1,
     });
     const prevTransformStateRef = useRef(transformState);
+    const imagesLoadedRef = useRef({ lr: false, sr: false });
 
     useEffect(() => {
         const prevTransformState = prevTransformStateRef.current;
@@ -38,13 +39,69 @@ export const ImageComparison = ({ image }: ImageComparisonProps) => {
     }, [transformState]);
 
     useEffect(() => {
-        lrRef.current?.centerView(1, 0);
-        srRef.current?.centerView(1, 0);
+        // Reset transform state when image changes
+        setTransformState({
+            positionX: 0,
+            positionY: 0,
+            scale: 1,
+        });
+        // Reset image load tracking
+        imagesLoadedRef.current = { lr: false, sr: false };
         setHandlePosition(50);
     }, [image]);
 
+    // Track image loading and center images once loaded
+    useEffect(() => {
+        // Center images function
+        const centerImages = () => {
+            if (lrRef.current && srRef.current) {
+                // Use requestAnimationFrame to ensure DOM is updated
+                requestAnimationFrame(() => {
+                    lrRef.current?.centerView(1, 0);
+                    srRef.current?.centerView(1, 0);
+                });
+            }
+        };
+
+        const lrImg = new Image();
+        const srImg = new Image();
+        let loadedCount = 0;
+
+        const checkAndCenter = () => {
+            loadedCount++;
+            if (loadedCount === 2) {
+                // Both images loaded, center them
+                setTimeout(() => {
+                    centerImages();
+                }, 50); // Small delay to ensure DOM is ready
+            }
+        };
+
+        lrImg.onload = () => {
+            imagesLoadedRef.current.lr = true;
+            checkAndCenter();
+        };
+        srImg.onload = () => {
+            imagesLoadedRef.current.sr = true;
+            checkAndCenter();
+        };
+
+        lrImg.src = image.LR;
+        srImg.src = image.SR;
+
+        // Fallback: center after a timeout even if images don't load
+        const fallbackTimer = setTimeout(() => {
+            centerImages();
+        }, 500);
+
+        return () => {
+            clearTimeout(fallbackTimer);
+        };
+    }, [image]);
+
     return (
         <ReactCompareSlider
+            key={`${image.LR}-${image.SR}`}
             onlyHandleDraggable
             className="react-compare-slider w-full"
             handle={

From e9d9f6fc1f84e51e45e1c5b44668fd3557c00d39 Mon Sep 17 00:00:00 2001
From: Joey Ballentine <joeyjballentine@gmail.com>
Date: Sat, 8 Nov 2025 15:16:06 -0600
Subject: [PATCH 7/7] linting

---
 src/elements/components/carousel/comparison.tsx        |  2 +-
 .../components/download-button-edit-popover.tsx        |  2 +-
 src/elements/components/editable-tags.tsx              |  2 +-
 .../components/image-carousel-edit-popover.tsx         |  2 +-
 tailwind.config.js                                     | 10 +++++++++-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/elements/components/carousel/comparison.tsx b/src/elements/components/carousel/comparison.tsx
index 369287c2..91318210 100644
--- a/src/elements/components/carousel/comparison.tsx
+++ b/src/elements/components/carousel/comparison.tsx
@@ -101,7 +101,6 @@ export const ImageComparison = ({ image }: ImageComparisonProps) => {
 
     return (
         <ReactCompareSlider
-            key={`${image.LR}-${image.SR}`}
             onlyHandleDraggable
             className="react-compare-slider w-full"
             handle={
@@ -194,6 +193,7 @@ export const ImageComparison = ({ image }: ImageComparisonProps) => {
                     </TransformComponent>
                 </TransformWrapper>
             }
+            key={`${image.LR}-${image.SR}`}
             position={handlePosition}
             onPositionChange={setHandlePosition}
         />
diff --git a/src/elements/components/download-button-edit-popover.tsx b/src/elements/components/download-button-edit-popover.tsx
index 0ffcd942..c4f0d096 100644
--- a/src/elements/components/download-button-edit-popover.tsx
+++ b/src/elements/components/download-button-edit-popover.tsx
@@ -196,7 +196,7 @@ export function EditResourceButton({
                 leaveTo="transform opacity-0 scale-95"
             >
                 <Popover.Panel
-                    className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                    className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
                         position === 'left' ? 'left-0' : 'right-0'
                     }`}
                 >
diff --git a/src/elements/components/editable-tags.tsx b/src/elements/components/editable-tags.tsx
index dbd493c6..ac4b0494 100644
--- a/src/elements/components/editable-tags.tsx
+++ b/src/elements/components/editable-tags.tsx
@@ -99,7 +99,7 @@ function EditTags({ tags, onChange }: { tags: readonly TagId[]; onChange: (value
                 leaveTo="transform opacity-0 scale-95"
             >
                 <Popover.Panel
-                    className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                    className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 text-sm shadow-lg focus:outline-none dark:bg-black ${
                         position === 'left' ? 'left-0' : 'right-0'
                     }`}
                 >
diff --git a/src/elements/components/image-carousel-edit-popover.tsx b/src/elements/components/image-carousel-edit-popover.tsx
index 5c0c9c4a..529dff52 100644
--- a/src/elements/components/image-carousel-edit-popover.tsx
+++ b/src/elements/components/image-carousel-edit-popover.tsx
@@ -202,7 +202,7 @@ export function EditImageButton({ image, onChange, children }: React.PropsWithCh
                     leaveTo="transform opacity-0 scale-95"
                 >
                     <Popover.Panel
-                        className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                        className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
                             position === 'left' ? 'left-0' : 'right-0'
                         }`}
                     >
diff --git a/tailwind.config.js b/tailwind.config.js
index 46f0fbf0..50a18ff1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,15 @@ module.exports = {
     theme: {
         extend: {
             fontFamily: {
-                sans: ['var(--font-inter)', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
+                sans: [
+                    'var(--font-inter)',
+                    '-apple-system',
+                    'BlinkMacSystemFont',
+                    'Segoe UI',
+                    'Helvetica',
+                    'Arial',
+                    'sans-serif',
+                ],
             },
             colors: {
                 'fade-50': '#f9f8ff',