feat: add fullscreen toggle to terminal demo

src/components/LandingPage.tsx

@@ -190,7 +190,7 @@ function LandingStyles() {
         flex-direction: column;
         align-items: center;
         min-height: 0;
-        padding: 0 0.75rem;
+        padding: 0 0.75rem 2rem;
       }
 
       .landing-terminal {

src/components/Terminal.tsx

@@ -2686,6 +2686,20 @@ function TerminalComponent({
   const programmaticScrollRef = useRef(false);
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const [showTopFade, setShowTopFade] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsFullscreen(false);
+    };
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", handleEsc);
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleEsc);
+    };
+  }, [isFullscreen]);
 
   useEffect(() => {
     const scrollEl = scrollRef.current;
@@ -2761,15 +2775,27 @@ function TerminalComponent({
         minHeight: 0,
         userSelect: "text",
         WebkitUserSelect: "text",
+        ...(isFullscreen
+          ? {
+              position: "fixed",
+              inset: 0,
+              zIndex: 9999,
+              height: "100dvh",
+              width: "100vw",
+              padding: 0,
+            }
+          : {}),
       }}
     >
       <div
         data-terminal
-        className="flex flex-col overflow-hidden rounded-xl"
+        className={`flex flex-col overflow-hidden ${isFullscreen ? "" : "rounded-xl"}`}
         style={{
           height: "100%",
           minHeight: 0,
-          borderColor: "var(--vocs-border-color-primary)",
+          borderColor: isFullscreen
+            ? "transparent"
+            : "var(--vocs-border-color-primary)",
           borderWidth: 1,
           borderStyle: "solid",
           backgroundColor: "var(--term-bg2)",
@@ -2808,6 +2834,64 @@ function TerminalComponent({
             }}
           />
           <span style={{ flex: 1 }} />
+          <button
+            type="button"
+            onClick={() => setIsFullscreen((f) => !f)}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "var(--term-gray5)",
+              padding: 2,
+              borderRadius: 4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "color 0.15s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = "var(--term-gray10)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = "var(--term-gray5)";
+            }}
+            aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+          >
+            {isFullscreen ? (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <title>Exit fullscreen</title>
+                <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+                <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+                <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+                <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+              </svg>
+            ) : (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <title>Fullscreen</title>
+                <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+                <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+                <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+                <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+              </svg>
+            )}
+          </button>
           <button
             type="button"
             onClick={() => {
@@ -2820,7 +2904,6 @@ function TerminalComponent({
             style={{
               background: "transparent",
               border: "none",
-
               color: "var(--term-gray5)",
               padding: 2,
               borderRadius: 4,