Css fixes, Tailwind forward

frontend/src/components/TopControls.tsx

@@ -12,7 +12,7 @@ import { Group } from "@mantine/core";
 const VIEW_OPTIONS = [
   {
     label: (
-      <Group gap={4}>
+      <Group gap={5}>
         <VisibilityIcon fontSize="small" />
       </Group>
     ),
@@ -48,8 +48,8 @@ const TopControls: React.FC<TopControlsProps> = ({
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <div className="absolute left-0 w-full top-0 z-sticky pointer-events-none">
-      <div className="absolute left-app-md top-1/2 -translate-y-1/2 pointer-events-auto flex gap-app-sm items-center">
+    <div className="absolute left-0 w-full top-0 z-[9999] pointer-events-none">
+      <div className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-auto flex gap-2 items-center">
         <Button
           onClick={toggleColorScheme}
           variant="subtle"
@@ -61,7 +61,6 @@ const TopControls: React.FC<TopControlsProps> = ({
         <LanguageSelector />
       </div>
       <div className="flex justify-center items-center h-full pointer-events-auto">
-        <div className="bg-bg-overlay backdrop-blur-sm rounded-app-xl p-app-sm">
           <SegmentedControl
             data={VIEW_OPTIONS}
             value={currentView}
@@ -71,10 +70,9 @@ const TopControls: React.FC<TopControlsProps> = ({
             size="md"
             fullWidth
           />
-        </div>
       </div>
     </div>
   );
 };
 
-export default TopControls;
+export default TopControls;

frontend/src/components/Viewer.tsx

@@ -25,8 +25,8 @@ interface LazyPageImageProps {
   setPageRef: (index: number, ref: HTMLImageElement | null) => void;
 }
 
-const LazyPageImage: React.FC<LazyPageImageProps> = ({ 
-  pageIndex, zoom, theme, isFirst, renderPage, pageImages, setPageRef 
+const LazyPageImage: React.FC<LazyPageImageProps> = ({
+  pageIndex, zoom, theme, isFirst, renderPage, pageImages, setPageRef
 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const [imageUrl, setImageUrl] = useState<string | null>(pageImages[pageIndex]);
@@ -41,9 +41,9 @@ const LazyPageImage: React.FC<LazyPageImageProps> = ({
           }
         });
       },
-      { 
+      {
         rootMargin: '200px', // Start loading 200px before visible
-        threshold: 0.1 
+        threshold: 0.1
       }
     );
 
@@ -104,10 +104,10 @@ const LazyPageImage: React.FC<LazyPageImageProps> = ({
     >
       {isVisible ? (
         <div style={{ textAlign: 'center' }}>
-          <div style={{ 
-            width: 20, 
-            height: 20, 
-            border: '2px solid #ddd', 
+          <div style={{
+            width: 20,
+            height: 20,
+            border: '2px solid #ddd',
             borderTop: '2px solid #666',
             borderRadius: '50%',
             animation: 'spin 1s linear infinite',
@@ -163,7 +163,7 @@ const Viewer: React.FC<ViewerProps> = ({
     }
 
     renderingPagesRef.current.add(pageIndex);
-    
+
     try {
       const page = await pdfDocRef.current.getPage(pageNum);
       const viewport = page.getViewport({ scale: 1.2 });
@@ -171,25 +171,25 @@ const Viewer: React.FC<ViewerProps> = ({
       canvas.width = viewport.width;
       canvas.height = viewport.height;
       const ctx = canvas.getContext("2d");
-      
+
       if (ctx) {
         await page.render({ canvasContext: ctx, viewport }).promise;
         const dataUrl = canvas.toDataURL();
-        
+
         // Update the pageImages array
         setPageImages(prev => {
           const newImages = [...prev];
           newImages[pageIndex] = dataUrl;
           return newImages;
         });
-        
+
         renderingPagesRef.current.delete(pageIndex);
         return dataUrl;
       }
     } catch (error) {
       console.error(`Failed to render page ${pageNum}:`, error);
     }
-    
+
     renderingPagesRef.current.delete(pageIndex);
     return null;
   };
@@ -284,21 +284,21 @@ const Viewer: React.FC<ViewerProps> = ({
       setLoading(true);
       try {
         let pdfUrl = pdfFile.url;
-        
+
         // Handle special IndexedDB URLs for large files
         if (pdfFile.url.startsWith('indexeddb:')) {
           const fileId = pdfFile.url.replace('indexeddb:', '');
           console.log('Loading large file from IndexedDB:', fileId);
-          
+
           // Get data directly from IndexedDB
           const arrayBuffer = await fileStorage.getFileData(fileId);
           if (!arrayBuffer) {
             throw new Error('File not found in IndexedDB - may have been purged by browser');
           }
-          
+
           // Store reference for cleanup
           currentArrayBufferRef.current = arrayBuffer;
-          
+
           // Use ArrayBuffer directly instead of creating blob URL
           const pdf = await getDocument({ data: arrayBuffer }).promise;
           pdfDocRef.current = pdf;
@@ -321,8 +321,8 @@ const Viewer: React.FC<ViewerProps> = ({
       if (!cancelled) setLoading(false);
     }
     loadPdfInfo();
-    return () => { 
-      cancelled = true; 
+    return () => {
+      cancelled = true;
       // Cleanup ArrayBuffer reference to help garbage collection
       currentArrayBufferRef.current = null;
     };
@@ -339,16 +339,7 @@ const Viewer: React.FC<ViewerProps> = ({
   }, [pageImages]);
 
   return (
-    <Paper
-      shadow="xs"
-      radius="md"
-      style={{
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        position: "relative",
-      }}
-    >
+    <>
       {!pdfFile ? (
         <Center style={{ flex: 1 }}>
           <Stack align="center">
@@ -586,7 +577,7 @@ const Viewer: React.FC<ViewerProps> = ({
         </ScrollArea>
       )}
 
-    </Paper>
+    </>
   );
 };