refactor: move embedded content styles from global CSS to Tailwind

web/src/components/MemoContent/TrustedIframe.ts

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+import { cn } from "@/lib/utils";
 import { isTrustedIframeSrc } from "./constants";
 
 export const TrustedIframe = (props: React.ComponentProps<"iframe">) => {
@@ -6,5 +7,8 @@ export const TrustedIframe = (props: React.ComponentProps<"iframe">) => {
     return null;
   }
 
-  return createElement("iframe", props);
+  return createElement("iframe", {
+    ...props,
+    className: cn("max-w-full rounded-lg border border-border", props.className),
+  });
 };

web/src/components/MemoContent/index.tsx

@@ -68,6 +68,9 @@ const MemoContent = (props: MemoContentProps) => {
         className={cn(
           "relative w-full max-w-full wrap-break-word text-base leading-6",
           "[&>*:last-child]:mb-0",
+          "[&_.katex-display]:max-w-full",
+          "[&_.katex-display]:overflow-x-auto",
+          "[&_.katex-display]:overflow-y-hidden",
           showCompactMode === "ALL" && "overflow-hidden",
           contentClassName,
         )}

web/src/components/UserMemoMap/UserMemoMap.tsx

@@ -111,7 +111,21 @@ const UserMemoMap = ({ creator, className }: Props) => {
         >
           {memosWithLocation.map((memo) => (
             <Marker key={memo.name} position={[memo.location!.latitude, memo.location!.longitude]} icon={defaultMarkerIcon}>
-              <Popup closeButton={false} className="memo-map-popup w-64!">
+              <Popup
+                closeButton={false}
+                className={cn(
+                  "w-64!",
+                  "[&_.leaflet-popup-content-wrapper]:rounded-lg",
+                  "[&_.leaflet-popup-content-wrapper]:border",
+                  "[&_.leaflet-popup-content-wrapper]:border-border",
+                  "[&_.leaflet-popup-content-wrapper]:bg-background",
+                  "[&_.leaflet-popup-content-wrapper]:shadow-lg",
+                  "[&_.leaflet-popup-content]:m-1",
+                  "[&_.leaflet-popup-content]:[font-size:inherit]",
+                  "[&_.leaflet-popup-content]:[line-height:inherit]",
+                  "[&_.leaflet-popup-tip]:bg-background",
+                )}
+              >
                 <div className="flex flex-col gap-2.5 p-3">
                   <div className="flex items-start justify-between gap-3">
                     <div className="space-y-1">

web/src/index.css

@@ -2,51 +2,12 @@
 @import "tw-animate-css";
 @import "./themes/default.css";
 
-@theme {
-  --default-transition-duration: 150ms;
-}
-
 @layer base {
   * {
     @apply border-border outline-none ring-0;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-
-  /* ========================================
-   * Embedded Content
-   * ======================================== */
-
-  /* iframes from trusted embed providers */
-  iframe {
-    max-width: 100%;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-  }
-
-  /* KaTeX math rendering */
-  .katex-display {
-    overflow-x: auto;
-    overflow-y: hidden;
-    max-width: 100%;
-  }
-
-  /* Leaflet Popup Overrides */
-  .leaflet-popup-content-wrapper {
-    border-radius: 0.5rem !important;
-    border: 1px solid var(--border) !important;
-    background-color: var(--background) !important;
-    box-shadow: var(--shadow-lg) !important;
-  }
-
-  .leaflet-popup-content {
-    margin: 4px !important;
-    line-height: inherit !important;
-    font-size: inherit !important;
-  }
-
-  .leaflet-popup-tip {
-    background-color: var(--background) !important;
-  }
 }