diff --git a/DEV_LOG.md b/DEV_LOG.md
index 3365f27..440ed82 100644
--- a/DEV_LOG.md
+++ b/DEV_LOG.md
@@ -202,3 +202,16 @@ This document tracks all modifications, npm packages, active compilation states,
 *   **Active Bugs**: None.
 *   **Type Checker Status**: Verified 100% clean type verification (`npx tsc --noEmit` returns exit code 0).
 
+---
+
+## [2026-06-14] - Insider CSS Viewport Refactoring (#ISSUE-018)
+
+### Modified
+*   **CSS Modal Layout Refactoring**: Fixed the viewport clipping bug in `InsiderMathModal.tsx` and `InsiderBlueprintModal.tsx` by updating the outer wrapper classes to `items-start` with `overflow-y-auto`, and inner card classes to `my-auto max-h-full` to allow dynamic scaling and scrolling.
+*   **Escape Key & Close Triggers**: Verified that both Escape key events and floating "X" close buttons remain fully functional and reachable across all screen dimensions.
+
+### Active Bugs / Compile Status
+*   **Active Bugs**: None.
+*   **Type Checker Status**: Verified 100% clean type verification (`npx tsc --noEmit` returns exit code 0).
+
+
diff --git a/components/modules/insider/InsiderBlueprintModal.tsx b/components/modules/insider/InsiderBlueprintModal.tsx
index 65714e5..1e8b604 100644
--- a/components/modules/insider/InsiderBlueprintModal.tsx
+++ b/components/modules/insider/InsiderBlueprintModal.tsx
@@ -24,8 +24,8 @@ export default function InsiderBlueprintModal({ isOpen, onClose }: InsiderBluepr
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/85 backdrop-blur-md p-4 sm:p-6 md:p-8 animate-fade-in">
-      <div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
+    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/40 backdrop-blur-sm flex items-start justify-center p-4 md:p-10 animate-fade-in">
+      <div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl my-auto max-h-full flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
         
         {/* Modal Header */}
         <div className="flex justify-between items-center px-6 py-4 bg-slate-950/45 border-b border-slate-800/60">
diff --git a/components/modules/insider/InsiderMathModal.tsx b/components/modules/insider/InsiderMathModal.tsx
index 45ceb0b..8ae42e2 100644
--- a/components/modules/insider/InsiderMathModal.tsx
+++ b/components/modules/insider/InsiderMathModal.tsx
@@ -26,8 +26,8 @@ export default function InsiderMathModal({ isOpen, onClose }: InsiderMathModalPr
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 backdrop-blur-md p-4 sm:p-6 md:p-8">
-      <div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-330">
+    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/40 backdrop-blur-sm flex items-start justify-center p-4 md:p-10">
+      <div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl my-auto max-h-full flex flex-col overflow-hidden shadow-2xl relative text-slate-330">
         
         {/* Modal Header */}
         <div className="flex justify-between items-center px-6 py-4 bg-slate-950/40 border-b border-slate-800/60">