update

reader/src/App.jsx

@@ -5,6 +5,7 @@ import {
   MenuBookIcon,
   MyLocationIcon,
   TitleIcon,
+  WidthIcon,
 } from "./icons/Icons";
 
 import structureOriginal from "./structure.json";
@@ -91,7 +92,7 @@ export default function App() {
   const [selectedIndex, setSelectedIndex] = useState(null);
   const [versions, setVersions] = useState(Array.from({ length: structure.length }, () => 0));
   const [displayTitle, setDisplayTitle] = useState(true);
-
+  const [isWideMode, setIsWideMode] = useState(false);
   function handleChange(i) {
     setSelectedIndex(i);
     setIsMenuOpen(false);
@@ -111,7 +112,10 @@ export default function App() {
       displayTitle={displayTitle}
     >
       <div className="flex-1">
-        <Reader file={structure[selectedIndex].files[versions[selectedIndex]]} />
+        <Reader
+          file={structure[selectedIndex].files[versions[selectedIndex]]}
+          compact={!isWideMode}
+        />
         <div className="absolute bottom-10 flex justify-between px-4 py-2 w-full z-999">
           <div className="flex space-x-2">
             <button
@@ -130,6 +134,16 @@ export default function App() {
             >
               <TitleIcon className="fill-gray-600" />
             </button>
+            {window.innerWidth > 576 && (
+              <button
+                className={`cursor-pointer p-2 rounded-full text-white border ${!isWideMode ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
+                onClick={() => {
+                  setIsWideMode((prev) => !prev);
+                }}
+              >
+                <WidthIcon className="fill-gray-600" />
+              </button>
+            )}
           </div>
           {structure[selectedIndex].files.length > 1 && (
             <div className="flex space-x-1">
@@ -190,7 +204,7 @@ export default function App() {
   );
 }
 
-export function Reader({ file }) {
+export function Reader({ file, compact }) {
   const [content, setContent] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -257,7 +271,7 @@ export function Reader({ file }) {
   }
 
   return (
-    <div className="w-full h-full overflow-hidden">
+    <div className={`w-full h-full overflow-hidden ${compact ? "max-w-xl mx-auto" : ""}`}>
       <iframe
         srcDoc={content}
         title={`File: ${file}`}

reader/src/icons/Icons.jsx

@@ -30,6 +30,27 @@ export function TitleIcon({ className }) {
   );
 }
 
+export function WidthIcon({ className }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      enableBackground="new 0 0 24 24"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="inherit"
+    >
+      <g>
+        <rect fill="none" height="24" width="24" />
+      </g>
+      <g>
+        <path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M4,18V6h2v12H4z M8,18V6h8v12H8z M20,18h-2V6h2V18z" />
+      </g>
+    </svg>
+  );
+}
+
 export function MenuBookIcon({ className }) {
   return (
     <svg