diff --git a/web/src/components/MemoContent/TrustedIframe.ts b/web/src/components/MemoContent/TrustedIframe.ts index 0fdd8c40e..65d9e657a 100644 --- a/web/src/components/MemoContent/TrustedIframe.ts +++ b/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), + }); }; diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx index dd07dacc9..484911e71 100644 --- a/web/src/components/MemoContent/index.tsx +++ b/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, )} diff --git a/web/src/components/UserMemoMap/UserMemoMap.tsx b/web/src/components/UserMemoMap/UserMemoMap.tsx index 2746c590e..a763a02c8 100644 --- a/web/src/components/UserMemoMap/UserMemoMap.tsx +++ b/web/src/components/UserMemoMap/UserMemoMap.tsx @@ -111,7 +111,21 @@ const UserMemoMap = ({ creator, className }: Props) => { > {memosWithLocation.map((memo) => ( - +
diff --git a/web/src/index.css b/web/src/index.css index 53d49382c..9d651cfa8 100644 --- a/web/src/index.css +++ b/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; - } }