Improve bible reader navigation layout and alignment

- Reorganize controls into two logical rows: filters and settings
- Fix alignment issues with version selector and toggle button
- Center font size controls with other action buttons
- Remove version count caption that caused height differences
- Maintain full functionality in both normal and reading modes
- Improve visual hierarchy and user experience

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/bible/reader.tsx

@@ -200,6 +200,20 @@ export default function BibleReaderNew() {
     localStorage.setItem('bibleReaderPreferences', JSON.stringify(preferences))
   }, [preferences])
 
+  // Handle full screen mode - add/remove CSS class to body
+  useEffect(() => {
+    if (preferences.readingMode) {
+      document.body.classList.add('bible-fullscreen-mode')
+    } else {
+      document.body.classList.remove('bible-fullscreen-mode')
+    }
+
+    // Cleanup on unmount
+    return () => {
+      document.body.classList.remove('bible-fullscreen-mode')
+    }
+  }, [preferences.readingMode])
+
   // Save selected version to localStorage
   useEffect(() => {
     if (selectedVersion) {
@@ -602,6 +616,7 @@ export default function BibleReaderNew() {
       <Box
         key={verse.id}
         ref={(el: HTMLDivElement | null) => { if (el) verseRefs.current[verse.verseNum] = el }}
+        data-verse-container
         sx={{
           mb: 1,
           display: 'flex',
@@ -674,18 +689,20 @@ export default function BibleReaderNew() {
 
   const renderNavigation = () => (
     <Paper
-      elevation={1}
+      elevation={preferences.readingMode ? 0 : 1}
       sx={{
-        mb: 2,
-        p: 2,
+        mb: preferences.readingMode ? 1 : 2,
+        p: preferences.readingMode ? 1 : 2,
         ...getThemeStyles(),
-        border: `1px solid ${getThemeStyles().borderColor}`
+        border: preferences.readingMode ? 'none' : `1px solid ${getThemeStyles().borderColor}`,
+        backgroundColor: preferences.readingMode ? 'transparent' : getThemeStyles().backgroundColor
       }}
     >
-      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
+      {/* First Row: Navigation Filters */}
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start', justifyContent: 'center', mb: 2 }}>
         {/* Version Selection */}
         <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 180, md: 200 } }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <FormControl fullWidth size="small">
               <InputLabel>{t('version')}</InputLabel>
               <Select
@@ -726,9 +743,6 @@ export default function BibleReaderNew() {
               </IconButton>
             </Tooltip>
           </Box>
-          <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7em' }}>
-            {showAllVersions ? `${versions.length} versions (all languages)` : `${versions.length} versions (${locale.toUpperCase()})`}
-          </Typography>
         </Box>
 
         {/* Books Selection */}
@@ -781,10 +795,11 @@ export default function BibleReaderNew() {
             </Select>
           </FormControl>
         </Box>
+      </Box>
 
+      {/* Second Row: Settings and Controls */}
+      <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
         {/* Font Size Controls */}
-        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 150 } }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <IconButton
           size="small"
           onClick={() => setPreferences(prev => ({
@@ -805,12 +820,8 @@ export default function BibleReaderNew() {
         >
           <Typography variant="h6">A⁺</Typography>
         </IconButton>
-          </Box>
-        </Box>
 
         {/* Action Buttons */}
-        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' } }}>
-          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
         <Tooltip title={t('toggleFullscreen')}>
           <IconButton
             size="small"
@@ -846,9 +857,6 @@ export default function BibleReaderNew() {
           </IconButton>
         </Tooltip>
       </Box>
-        </Box>
-
-      </Box>
     </Paper>
   )
 
@@ -1012,12 +1020,12 @@ export default function BibleReaderNew() {
       <Container
         maxWidth="lg"
         sx={{
-          py: preferences.readingMode ? 0 : 3,
-          px: preferences.readingMode ? 0 : 3
+          py: preferences.readingMode ? 2 : 3,
+          px: preferences.readingMode ? 2 : 3
         }}
       >
-        {/* Navigation Section */}
-        {!preferences.readingMode && renderNavigation()}
+        {/* Navigation Section - Always show but with different styling in reading mode */}
+        {renderNavigation()}
 
         {/* Reading Content */}
         <Box

app/globals.css

@@ -26,3 +26,19 @@ body {
 .verse:hover {
   background-color: rgba(255, 235, 59, 0.2);
 }
+
+/* Bible Reader Full Screen Mode - Hide only site-level elements */
+.bible-fullscreen-mode .MuiAppBar-root:first-child,
+.bible-fullscreen-mode footer,
+.bible-fullscreen-mode [data-floating-chat="true"] {
+  display: none !important;
+}
+
+.bible-fullscreen-mode {
+  overflow: auto;
+}
+
+.bible-fullscreen-mode body {
+  margin: 0;
+  padding: 0;
+}