Fix responsive layout, image viewer zoom, file path selection, bump to pre-alpha

- Desktop layout now requires landscape+768px or 1024px+, so portrait
  tablets get the mobile single-panel UI with tab bar
- Image viewer uses actual width/height instead of CSS transform scale,
  fixing clipped edges when zoomed in — full pan/scroll at any zoom level
- File path text in viewers is now selectable and horizontally scrollable
  instead of truncated with ellipsis and select-none
- Version bumped to 0.1.0-pre-alpha

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/AppShell.tsx

@@ -8,12 +8,17 @@ import BrowserPage from "./browser/BrowserPage";
 import InputBox from "./terminal/InputBox";
 import { useUiStore } from "~/stores/uiStore";
 
+// Desktop layout requires landscape orientation AND at least 768px width,
+// OR at least 1024px width in any orientation.
+// This ensures portrait tablets get the mobile single-panel UI.
+const DESKTOP_QUERY = "(min-width: 1024px), (min-width: 768px) and (orientation: landscape)";
+
 function useIsDesktop() {
   const [isDesktop, setIsDesktop] = useState(
-    typeof window !== "undefined" ? window.innerWidth >= 768 : true
+    typeof window !== "undefined" ? window.matchMedia(DESKTOP_QUERY).matches : true
   );
   useEffect(() => {
-    const mq = window.matchMedia("(min-width: 768px)");
+    const mq = window.matchMedia(DESKTOP_QUERY);
     const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);

app/components/MobileTabBar.tsx

@@ -35,7 +35,7 @@ export default function MobileTabBar() {
   const setActiveTab = useUiStore((s) => s.setActiveTab);
 
   return (
-    <nav className="flex items-center border-t border-gray-800 bg-[#0d0d1a] shrink-0 md:hidden safe-bottom">
+    <nav className="flex items-center border-t border-gray-800 bg-[#0d0d1a] shrink-0 safe-bottom">
       {tabs.map((tab) => (
         <button
           key={tab.id}

app/components/files/CodeEditor.tsx

@@ -223,7 +223,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
     <div className="flex flex-col h-full">
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-3 py-1.5 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-x-auto select-text mr-2 scrollbar-none" title={path}>{path}</span>
         <div className="flex items-center gap-1.5 shrink-0">
           {canPreview && (
             <div className="flex items-center bg-[#0d0d1a] rounded overflow-hidden border border-gray-700">

app/components/files/FileViewer.tsx

@@ -27,7 +27,7 @@ function MediaViewer({ path, type, onClose }: { path: string; type: "video" | "a
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-x-auto select-text mr-2 scrollbar-none" title={path}>{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
@@ -75,7 +75,7 @@ function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-x-auto select-text mr-2 scrollbar-none" title={path}>{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           {numPages > 0 && (
             <span className="text-[10px] text-gray-500">{numPages} pg</span>
@@ -158,7 +158,7 @@ export default function FileViewer({ path, content, onSave, onClose }: FileViewe
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-x-auto select-text mr-2 scrollbar-none" title={path}>{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}

app/components/files/ImageViewer.tsx

@@ -7,12 +7,18 @@ interface ImageViewerProps {
 
 export default function ImageViewer({ path, onClose }: ImageViewerProps) {
   const [zoom, setZoom] = useState(1);
+  const [naturalSize, setNaturalSize] = useState<{ w: number; h: number } | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const zoomIn = () => setZoom((z) => Math.min(5, z + 0.25));
   const zoomOut = () => setZoom((z) => Math.max(0.1, z - 0.25));
   const zoomFit = () => setZoom(1);
 
+  const handleImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+  }, []);
+
   // Pinch-to-zoom
   const lastDistance = useRef(0);
   const handleTouchMove = useCallback((e: React.TouchEvent) => {
@@ -34,7 +40,7 @@ export default function ImageViewer({ path, onClose }: ImageViewerProps) {
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-x-auto select-text mr-2 scrollbar-none" title={path}>{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           {/* Zoom controls */}
           <div className="flex items-center gap-1 border border-gray-700 rounded overflow-hidden">
@@ -65,12 +71,23 @@ export default function ImageViewer({ path, onClose }: ImageViewerProps) {
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
-        <div className="min-w-full min-h-full flex items-center justify-center p-4" style={{ transform: `scale(${zoom})`, transformOrigin: "center center" }}>
+        <div
+          className="flex items-center justify-center p-4"
+          style={{
+            minWidth: naturalSize ? Math.max(naturalSize.w * zoom + 32, containerRef.current?.clientWidth ?? 0) : "100%",
+            minHeight: naturalSize ? Math.max(naturalSize.h * zoom + 32, containerRef.current?.clientHeight ?? 0) : "100%",
+          }}
+        >
           <img
             src={`/api/files/download?path=${encodeURIComponent(path)}&inline=1`}
             alt={path}
             className="max-w-none"
             draggable={false}
+            onLoad={handleImageLoad}
+            style={naturalSize ? {
+              width: naturalSize.w * zoom,
+              height: naturalSize.h * zoom,
+            } : undefined}
           />
         </div>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "otgcode",
-  "version": "0.1.0",
+  "version": "0.1.0-pre-alpha",
   "private": true,
   "type": "module",
   "scripts": {