@conscience-technology/ctds 0.1.13 → 0.2.0

package/assets/components/GeneratedImage/GeneratedImage.module.css

@@ -0,0 +1,90 @@
+/* GeneratedImage — AI가 생성한 이미지 큰 표시. loading / placeholder / image 세 상태. */
+
+.root {
+  position: relative;
+  width: 100%;
+  max-width: calc(var(--input-w-lg) * 1.1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--bg-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+}
+
+/* aspect ratios */
+.aspectSquare {
+  aspect-ratio: 1 / 1;
+}
+.aspectPortrait {
+  aspect-ratio: 3 / 4;
+}
+.aspectLandscape {
+  aspect-ratio: 4 / 3;
+}
+
+/* 이미지 */
+.hasImage {
+  background: var(--bg-muted);
+}
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Placeholder / Loading — bg 이미지 + Spinner lottie-dots */
+.placeholder,
+.loading {
+  background: url("/illustrations/image-gen-placeholder.png") center / cover no-repeat,
+    var(--bg-muted);
+}
+
+.spinner {
+  color: var(--bg);
+  /* image-gen 로띠는 공간이 넉넉해야 보기 좋음 — loader-size override. */
+  --loader-size: var(--space-16);
+}
+
+/* Download 버튼 — hover 시만 노출, 우상단 */
+.downloadBtn {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  width: var(--space-8);
+  height: var(--space-8);
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  transform: scale(0.9);
+  transition:
+    opacity var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    var(--transition-colors);
+}
+.root:hover .downloadBtn,
+.downloadBtn:focus-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.downloadBtn:hover {
+  background: var(--bg-subtle);
+}
+.downloadBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-sm), var(--ring);
+}
+.downloadIcon {
+  width: 55%;
+  height: 55%;
+}

package/assets/components/GeneratedImage/GeneratedImage.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { HTMLAttributes, MouseEvent } from "react";
+import { DownloadSimple as PhDownload } from "@phosphor-icons/react";
+import { Spinner } from "@/components/ctds/Spinner";
+import { Tooltip } from "@/components/ctds/Tooltip";
+import styles from "./GeneratedImage.module.css";
+
+export type GeneratedImageAspect = "square" | "portrait" | "landscape";
+
+export interface GeneratedImageProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 생성된 이미지 URL. 없거나 loading이면 placeholder. */
+  src?: string;
+  alt?: string;
+  /** 가로세로 비율. portrait=3/4(기본, 레퍼런스), square=1/1, landscape=4/3. */
+  aspect?: GeneratedImageAspect;
+  /** 생성 중 — placeholder + sparkle breathe 애니. */
+  loading?: boolean;
+  /** 다운로드 버튼 클릭. 미지정 시 버튼 숨김. */
+  onDownload?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const aspectClass: Record<GeneratedImageAspect, string> = {
+  square: styles.aspectSquare,
+  portrait: styles.aspectPortrait,
+  landscape: styles.aspectLandscape,
+};
+
+export function GeneratedImage({
+  src,
+  alt = "",
+  aspect = "portrait",
+  loading = false,
+  onDownload,
+  className,
+  ...rest
+}: GeneratedImageProps) {
+  const cls = [
+    styles.root,
+    aspectClass[aspect],
+    loading ? styles.loading : src ? styles.hasImage : styles.placeholder,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={cls} {...rest}>
+      {loading || !src ? (
+        <Spinner variant="lottie-image-gen" size="lg" className={styles.spinner} />
+      ) : (
+        <img src={src} alt={alt} className={styles.img} />
+      )}
+
+      {onDownload && src && !loading ? (
+        <Tooltip content="다운로드">
+          <button
+            type="button"
+            className={styles.downloadBtn}
+            onClick={onDownload}
+            aria-label="이미지 다운로드"
+          >
+            <PhDownload className={styles.downloadIcon} weight="regular" />
+          </button>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}

package/assets/components/GeneratedImage/index.ts

@@ -0,0 +1,5 @@
+export { GeneratedImage } from "./GeneratedImage";
+export type {
+  GeneratedImageProps,
+  GeneratedImageAspect,
+} from "./GeneratedImage";

package/assets/components/Icon/Icon.tsx

@@ -128,6 +128,7 @@ import {
   Scissors as PhScissors,
   ClipboardText as PhClipboardText,
   Camera as PhCamera,
+  Globe as PhGlobe,
 } from "@phosphor-icons/react";
 
 // Solar (Linear = regular, Bold = fill) ───────────────────────────
@@ -308,7 +309,8 @@ export type IconName =
   | "copy-simple"
   | "scissors"
   | "clipboard-text"
-  | "camera";
+  | "camera"
+  | "globe";
 
 type AnyComp = React.ComponentType<any>;
 // Solar는 weight별 두 컴포넌트가 필요. 다른 family는 단일 컴포넌트.
@@ -422,6 +424,7 @@ const phosphorSet: Partial<Record<IconName, AnyComp>> = {
   scissors: PhScissors,
   "clipboard-text": PhClipboardText,
   camera: PhCamera,
+  globe: PhGlobe,
 };
 
 /* solar 세트 — 라이브러리에 자연스러운 1:1 대응이 있는 것만.

package/assets/components/Input/Input.module.css

@@ -132,6 +132,9 @@
   font-family: inherit;
   font-size: inherit;
   line-height: var(--lh-sm);
+  /* 전역 tight 자간(-0.02em)을 상속하면 password dot(●)이 너무 벌어져 보이고
+     placeholder도 느슨해 보임. 폼 필드는 자간 조이지 않는다. */
+  letter-spacing: var(--tracking-normal);
   outline: none;
   /* type="button" 등 non-text input의 기본 center 정렬 무력화. */
   text-align: start;

package/assets/components/MessageState/MessageState.module.css

@@ -15,12 +15,13 @@
   font-weight: var(--font-weight-regular);
 }
 
+/* 리더 폭 — Spinner size=sm(20px)과 통일. 아이콘/스피너 전환해도 라벨 위치 안 흔들림. */
 .leadIcon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-4);
-  height: var(--space-4);
+  width: var(--loader-size-sm);
+  height: var(--loader-size-sm);
   color: var(--primary);
   flex: 0 0 auto;
 }
@@ -31,27 +32,32 @@
 .leadSpinner {
   color: var(--primary);
   flex: 0 0 auto;
+  /* Spinner sm = 20px = loader-size-sm. 폭 명시해 동일 width 보장. */
+  width: var(--loader-size-sm);
+  height: var(--loader-size-sm);
 }
 
-/* 통통거리는 라벨 (AIMessage의 generating 패턴과 동일 — 중복 정의) */
+/* 통통거리는 라벨 — 글자 수에 비례한 cycle, 각 글자 index 지연으로 wave. */
 .label {
   display: inline-flex;
   align-items: center;
 }
 .bounceChar {
   display: inline-block;
-  animation: msgstate-char-bounce calc(var(--duration-slower) * 5) var(--ease-in-out) infinite;
+  animation: msgstate-char-bounce calc(var(--duration-slower) * 10) var(--ease-in-out) infinite;
 }
 .bounceSpace {
   display: inline-block;
   white-space: pre;
 }
+/* bounce는 cycle 앞 35%까지만 (올라감 17.5%→피크→내려옴 35%), 나머지 65%는 쉼.
+   cycle을 2배로 늘렸으니 bounce 자체 속도는 그대로, 다음 wave까지 간격만 길어짐. */
 @keyframes msgstate-char-bounce {
-  0%, 70%, 100% {
+  0%, 35%, 100% {
     transform: translateY(0);
     opacity: 0.6;
   }
-  35% {
+  17.5% {
     transform: translateY(calc(-1.5px * var(--motion-distance-scale))); /* lint-hardcoded: ignore */
     opacity: 1;
   }

package/assets/components/MessageState/MessageState.tsx

@@ -23,9 +23,11 @@ export type MessageStateKind =
 
 export interface MessageStateProps extends HTMLAttributes<HTMLDivElement> {
   kind?: MessageStateKind;
-  /** 라벨 override. kind별 기본 라벨이 있지만 커스터마이즈 가능. */
+  /** 활성 상태 라벨 override. 미지정 시 kind별 기본("…ing…"). */
   message?: ReactNode;
-  /** 완료 상태 — true면 spinner 자리에 ✓, 라벨 통통거림 멈춤. */
+  /** 완료 상태 라벨 override. 미지정 시 kind별 done 기본("…ed"). */
+  doneMessage?: ReactNode;
+  /** 완료 상태 — true면 spinner 자리에 ✓, 라벨 통통거림 멈춤, doneMessage로 전환. */
   done?: boolean;
   /** 커스텀 아이콘 — kind="custom"이거나 override 하고 싶을 때. */
   icon?: ReactNode;
@@ -34,13 +36,24 @@ export interface MessageStateProps extends HTMLAttributes<HTMLDivElement> {
 const DEFAULT_MESSAGE: Record<MessageStateKind, string> = {
   generating: "응답 생성 중…",
   searching: "Searching the web…",
-  memory: "Updated saved memory",
+  memory: "Updating memory…",
   image: "Looking at the image…",
   video: "Reviewing the video…",
   file: "Processing file…",
   custom: "",
 };
 
+/** 완료 상태 라벨 — done=true일 때 message prop이 없으면 이걸 사용. */
+const DEFAULT_DONE_MESSAGE: Record<MessageStateKind, string> = {
+  generating: "응답 완료",
+  searching: "Searched the web",
+  memory: "Updated saved memory",
+  image: "Looked at the image",
+  video: "Reviewed the video",
+  file: "Processed file",
+  custom: "",
+};
+
 const KIND_ICON: Record<MessageStateKind, React.ComponentType<any> | null> = {
   generating: null, // Spinner만
   searching: PhSearch,
@@ -76,12 +89,15 @@ function renderBouncingText(text: string) {
 export function MessageState({
   kind = "generating",
   message,
+  doneMessage,
   done = false,
   icon,
   className,
   ...rest
 }: MessageStateProps) {
-  const label = message ?? DEFAULT_MESSAGE[kind];
+  const label = done
+    ? doneMessage ?? DEFAULT_DONE_MESSAGE[kind]
+    : message ?? DEFAULT_MESSAGE[kind];
   const KindIcon = KIND_ICON[kind];
 
   const cls = [styles.root, className].filter(Boolean).join(" ");
@@ -96,11 +112,13 @@ export function MessageState({
     <Spinner variant="lottie-dots" size="sm" className={styles.leadSpinner} />
   );
 
+  const labelStr = typeof label === "string" ? label : null;
+
   return (
     <div className={cls} data-done={done || undefined} {...rest}>
       {leadIcon}
       <span className={styles.label}>
-        {done || typeof label !== "string" ? label : renderBouncingText(label)}
+        {done || !labelStr ? label : renderBouncingText(labelStr)}
       </span>
     </div>
   );

package/assets/components/Modal/Modal.tsx

@@ -29,7 +29,16 @@ export interface ModalProps {
   disableEscape?: boolean;
 }
 
-export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
+/**
+ * 간편 모드 — 가장 흔한 "title + body + footer" 레이아웃을 flat prop으로 넘긴다.
+ * 커스터마이즈가 필요하면 compound 모드:
+ *   <Modal.Root open onOpenChange={set}>
+ *     <Modal.Header title="…" />
+ *     <Modal.Body>…</Modal.Body>
+ *     <Modal.Footer>…</Modal.Footer>
+ *   </Modal.Root>
+ */
+const ModalComponent = forwardRef<HTMLDivElement, ModalProps>(function Modal(
   {
     open,
     onOpenChange,
@@ -43,6 +52,38 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
     disableEscape,
   },
   ref,
+) {
+  return (
+    <ModalRoot
+      open={open}
+      onOpenChange={onOpenChange}
+      disableEscape={disableEscape}
+      ref={ref}
+    >
+      <ModalHeader
+        title={title}
+        description={description}
+        titleSrOnly={titleSrOnly}
+        dismissible={dismissible}
+        dismissLabel={dismissLabel}
+      />
+      {children !== undefined && children !== null && <ModalBody>{children}</ModalBody>}
+      {footer && <ModalFooter>{footer}</ModalFooter>}
+    </ModalRoot>
+  );
+});
+
+export interface ModalRootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  /** ESC 키 닫힘 차단. 중요한 확인/저장 중엔 true. */
+  disableEscape?: boolean;
+}
+
+export const ModalRoot = forwardRef<HTMLDivElement, ModalRootProps>(function ModalRoot(
+  { open, onOpenChange, children, disableEscape },
+  ref,
 ) {
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
@@ -59,40 +100,80 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
             e.preventDefault();
           }}
         >
-          <div className={styles.header}>
-            <div className={styles.headerText}>
-              <RadixDialog.Title
-                className={[styles.title, titleSrOnly && "visually-hidden"]
-                  .filter(Boolean)
-                  .join(" ")}
-              >
-                {title}
-              </RadixDialog.Title>
-              {description && (
-                <RadixDialog.Description className={styles.description}>
-                  {description}
-                </RadixDialog.Description>
-              )}
-            </div>
-            {dismissible && (
-              <RadixDialog.Close asChild>
-                <IconButton
-                  className={styles.close}
-                  variant="ghost"
-                  icon={<Icon name="x" />}
-                  aria-label={dismissLabel}
-                />
-              </RadixDialog.Close>
-            )}
-          </div>
-          {children !== undefined && children !== null && (
-            <div className={styles.body}>
-              <div className={styles.bodyInner}>{children}</div>
-            </div>
-          )}
-          {footer && <div className={styles.footer}>{footer}</div>}
+          {children}
         </RadixDialog.Content>
       </RadixDialog.Portal>
     </RadixDialog.Root>
   );
 });
+
+export interface ModalHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+  titleSrOnly?: boolean;
+  dismissible?: boolean;
+  dismissLabel?: string;
+}
+
+export function ModalHeader({
+  title,
+  description,
+  titleSrOnly,
+  dismissible = true,
+  dismissLabel,
+}: ModalHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div className={styles.headerText}>
+        <RadixDialog.Title
+          className={[styles.title, titleSrOnly && "visually-hidden"]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {title}
+        </RadixDialog.Title>
+        {description && (
+          <RadixDialog.Description className={styles.description}>
+            {description}
+          </RadixDialog.Description>
+        )}
+      </div>
+      {dismissible && (
+        <RadixDialog.Close asChild>
+          <IconButton
+            className={styles.close}
+            variant="ghost"
+            icon={<Icon name="x" />}
+            aria-label={dismissLabel}
+          />
+        </RadixDialog.Close>
+      )}
+    </div>
+  );
+}
+
+export function ModalBody({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.body}>
+      <div className={styles.bodyInner}>{children}</div>
+    </div>
+  );
+}
+
+export function ModalFooter({ children }: { children: ReactNode }) {
+  return <div className={styles.footer}>{children}</div>;
+}
+
+type ModalCompound = typeof ModalComponent & {
+  Root: typeof ModalRoot;
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+export const Modal = Object.assign(ModalComponent, {
+  Root: ModalRoot,
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter,
+}) as ModalCompound;

package/assets/components/Modal/index.ts

@@ -1,2 +1,12 @@
-export { Modal } from "./Modal";
-export type { ModalProps } from "./Modal";
+export {
+  Modal,
+  ModalRoot,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "./Modal";
+export type {
+  ModalProps,
+  ModalRootProps,
+  ModalHeaderProps,
+} from "./Modal";

package/assets/components/Spinner/Spinner.module.css

@@ -14,10 +14,10 @@
   flex-shrink: 0;
 }
 
-.xs { --loader-size: var(--loader-size-xs); }
 .sm { --loader-size: var(--loader-size-sm); }
 .md { --loader-size: var(--loader-size-md); }
 .lg { --loader-size: var(--loader-size-lg); }
+.xl { --loader-size: var(--loader-size-xl); }
 
 /* 자식 전부 기본 숨김 — 활성 variant만 켬. */
 .ring,

package/assets/components/Spinner/Spinner.tsx

@@ -19,7 +19,7 @@ import styles from "./Spinner.module.css";
 import type { LottieName } from "./lottieManifest";
 import { LottiePlayer } from "./LottiePlayer";
 
-export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
 export type SpinnerBaseVariant = "ring" | "dots-bounce" | "dots-fade" | "pulse";
 export type SpinnerLottieVariant = `lottie-${LottieName}`;
 export type SpinnerVariant = SpinnerBaseVariant | SpinnerLottieVariant;
@@ -33,10 +33,10 @@ export type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
 };
 
 const sizeClass: Record<SpinnerSize, string> = {
-  xs: styles.xs,
   sm: styles.sm,
   md: styles.md,
   lg: styles.lg,
+  xl: styles.xl,
 };
 
 const baseVariantClass: Record<SpinnerBaseVariant, string> = {

package/assets/components/Switch/Switch.tsx

@@ -16,6 +16,12 @@ export type SwitchProps = Omit<
   "type" | "size"
 > & {
   size?: SwitchSize;
+  /**
+   * 토글 변경 콜백. 공식 API — 대부분의 경우 이걸 쓴다.
+   * 네이티브 `onChange`도 받아낼 수 있는데, 둘 다 쓰면 호출 순서는:
+   *   1) onChange(e) — 호출자가 e.preventDefault() 할 수 있는 escape hatch.
+   *   2) onChange가 preventDefault 하지 않으면 onCheckedChange(checked).
+   */
   onCheckedChange?: (checked: boolean) => void;
 };
 

package/assets/components/TableHeader/TableHeader.module.css

@@ -92,16 +92,18 @@
   background: var(--bg);
 }
 
-/* pinned 경계 — hairline으로 "고정 영역" 분리. TableRow와 짝. */
+/* pinned 경계 — hairline으로 "고정 영역" 분리. TableRow와 짝.
+   border 대신 inset box-shadow로 그어 sticky 레이어 subpixel 겹침(두 줄처럼
+   보이는 Chrome 렌더 현상) 회피 + 셀 폭에 영향 안 줌. */
 .cellSlot[data-pinned="left"] {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 .cellSlot[data-pinned="right"] {
-  border-left: var(--hairline) solid var(--border);
+  box-shadow: inset var(--hairline) 0 0 var(--border);
 }
 
 .selectCell {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 
 /* Cell (columnheader) ─────────────────────────────────────── */
@@ -210,6 +212,15 @@
   display: none;
 }
 
+/* pinned 경계 hairline과 tick(cellSlot 좌측 세로선) 겹침 방지.
+   - pinned-left 셀의 바로 다음 cellSlot: pinned의 border-right와 다음 셀의
+     tick이 바로 붙어 두 줄처럼 보이는 현상 제거.
+   - pinned-right 셀 자신: border-left와 자기 tick이 같은 지점에 겹침. */
+.cellSlot[data-pinned="left"] + .cellSlot .tick,
+.cellSlot[data-pinned="right"] .tick {
+  display: none;
+}
+
 /* Resize handle ──────────────────────────────────────────────
    히트 영역은 셀 우측 경계에 걸쳐 있는 투명 버튼. 시각 세로선은 안쪽 .resizeLine이
    담당하고, 라인은 handle 폭 안에서 "우측 끝"이 아니라 "중앙"에 위치 →
@@ -217,11 +228,10 @@
 .resizeHandle {
   position: absolute;
   top: 0;
-  /* handle 중심을 다음 세로 구분선 위치에 정확히 맞춤.
-     - 데이터 row의 세로선: 다음 cellSlot의 좌측 경계(= 현재 셀 우측 + cellSlot gap).
-     - handle 중심이 그 지점에 오도록: right = -(gap + handleWidth/2).
-     cellSlot gap은 TableRow의 column-gap(--space-1). */
-  right: calc((var(--space-1) * -1) - (var(--space-3) * 0.5));
+  /* handle 중심을 셀 우측 경계(= 데이터 row의 세로 구분선)에 정확히 맞춤.
+     TableRow는 cellSlot 사이 column-gap을 쓰지 않으므로 추가 보정 없음.
+     right = -(handleWidth/2). */
+  right: calc(var(--space-3) * -0.5);
   bottom: 0;
   width: var(--space-3);
   padding: 0;
@@ -241,36 +251,35 @@
   border-radius: var(--radius-xs);
 }
 
-/* 시각 세로선 — plate에서만 hover 시 표시. line은 자체 tick으로 대체하므로 숨김.
-   색은 border-strong(살짝 밝은 hairline 톤) — fg-subtle은 너무 진해서 데이터 색과 경쟁함. */
 /* 둥근 pill 핸들 — 선이 아니라 떠있는 그립 느낌.
-   폭은 좁고 세로로 길쭉한 캡슐, 연한 중성 톤에 그림자로 "집어들 수 있는" 어포던스. */
+   흰(bg) 캡슐에 연한 hairline + 연한 그림자로 "집어들 수 있는" 어포던스.
+   hover 전엔 숨겨두고, 셀 hover 때 opacity로 올려 보여줌. */
 .resizeLine {
   display: block;
-  width: var(--space-1);
-  height: 60%;
-  background: var(--border-strong);
+  width: calc(var(--space-1) * 1.25);
+  height: 48%;
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
   border-radius: var(--radius-full);
   opacity: 0;
   box-shadow: var(--shadow-xs);
   transition:
     opacity var(--duration-fast) var(--ease-out),
-    background var(--duration-fast) var(--ease-out),
     height var(--duration-fast) var(--ease-out),
     box-shadow var(--duration-fast) var(--ease-out);
 }
 
 /* 셀 전체 hover: pill 연하게 노출. */
 .cell:hover .resizeLine {
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
-/* handle hover/active: 더 또렷하게 + 길어지고 shadow 깊어짐 — "집은 상태". */
+/* handle hover/active: 또렷하게 + 길어지고 그림자 깊어짐 — "집은 상태".
+   색/스트로크는 유지, 변하는 건 opacity·height·shadow 뿐. */
 .resizeHandle:hover .resizeLine,
 .resizeHandle:active .resizeLine {
   opacity: 1;
-  background: var(--fg-muted);
-  height: 80%;
+  height: 64%;
   box-shadow: var(--shadow-sm);
 }