🔧 Fix mobile dense mode display issues

PROBLEM: Dense mode was not working properly on mobile devices while working correctly on desktop.

ROOT CAUSE: Multiple CSS conflicts were preventing dense mode from displaying inline on mobile:
1. Global mobile CSS rules applying word-break: break-word to all p, span, div elements
2. Missing mobile-specific overrides for dense mode paragraphs
3. Inconsistent CSS class targeting between legacy and new systems

SOLUTION:
- Add mobile-specific CSS overrides for dense mode paragraphs
- Override word-break behavior specifically for dense mode elements
- Add higher specificity rules to ensure dense mode works on mobile
- Target both legacy (.viewer-paragraph.dense-paragraph) and new (.wewrite-viewer-paragraph.dense) class systems
- Ensure dense-content-flow container allows proper inline flow on mobile

TECHNICAL CHANGES:
- Enhanced mobile CSS in globals.css with dense mode exceptions
- Added mobile optimizations in content-display.css
- Fixed word-break and overflow-wrap conflicts for dense paragraphs
- Ensured proper spacing and inline display for mobile dense mode

Now dense mode works consistently across desktop and mobile devices.

Author: sirjamesgray

app/globals.css

@@ -311,6 +311,57 @@ body .paragraph-number {
   margin-left: 0;
 }
 
+/* Mobile optimizations for dense mode */
+@media (max-width: 767px) {
+  /* Ensure dense mode paragraphs display inline on mobile */
+  .viewer-paragraph.dense-paragraph {
+    @apply inline-block mr-4;
+    /* Force inline-block display on mobile */
+    display: inline-block !important;
+  }
+
+  /* Ensure proper spacing for dense mode paragraph numbers on mobile */
+  .viewer-paragraph.dense-paragraph .paragraph-number {
+    @apply mr-3;
+    /* Maintain proper spacing on mobile */
+    margin-right: 0.75rem !important;
+  }
+
+  /* Ensure dense content flows properly on mobile */
+  .dense-content-flow {
+    @apply leading-relaxed;
+    /* Maintain proper line height on mobile */
+    line-height: 1.625 !important;
+    /* Ensure dense content container allows inline flow on mobile */
+    display: block !important;
+    width: 100% !important;
+  }
+
+  /* Prevent mobile from breaking dense mode layout */
+  .viewer-paragraph.dense-paragraph .paragraph-content {
+    @apply inline;
+    /* Ensure content stays inline on mobile */
+    display: inline !important;
+  }
+
+  /* Additional mobile dense mode fixes with higher specificity */
+  .viewer-paragraph.dense-paragraph,
+  .wewrite-viewer-paragraph.dense {
+    /* Force inline-block with higher specificity */
+    display: inline-block !important;
+    margin-right: 1rem !important;
+    vertical-align: top !important;
+    /* Allow normal text wrapping but maintain inline-block structure */
+    white-space: normal !important;
+  }
+
+  /* Ensure content within dense paragraphs displays inline */
+  .viewer-paragraph.dense-paragraph .paragraph-content,
+  .wewrite-viewer-paragraph.dense .paragraph-content {
+    display: inline !important;
+  }
+}
+
 /* Global zoom prevention (applies to all screen sizes) */
 html {
   /* Prevent zoom via CSS zoom property */
@@ -607,6 +658,15 @@ input[type="range"]::-moz-range-thumb,
     word-break: break-word;
   }
 
+  /* EXCEPTION: Dense mode paragraphs should maintain normal word breaking */
+  .viewer-paragraph.dense-paragraph,
+  .viewer-paragraph.dense-paragraph p,
+  .viewer-paragraph.dense-paragraph span,
+  .viewer-paragraph.dense-paragraph div {
+    word-break: normal !important;
+    overflow-wrap: normal !important;
+  }
+
   /* Headings get special treatment to prevent unnecessary hyphenation */
   h1, h2, h3, h4, h5, h6 {
     max-width: 100%;

app/styles/content-display.css

@@ -271,7 +271,7 @@
 
 /**
  * Mobile Optimizations
- * 
+ *
  * Ensure content displays properly on mobile devices.
  */
 @media (max-width: 767px) {
@@ -282,16 +282,30 @@
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
-    
+
     /* Prevent horizontal scrolling */
     overflow-wrap: break-word;
     word-break: break-word;
   }
-  
-  .wewrite-viewer-paragraph {
+
+  .wewrite-viewer-paragraph,
+  .viewer-paragraph {
     /* Adjust paragraph spacing on mobile */
     @apply gap-2 py-1;
   }
+
+  /* Ensure dense mode works properly on mobile */
+  .wewrite-viewer-paragraph.dense,
+  .viewer-paragraph.dense-paragraph {
+    @apply inline-block mr-4;
+    /* Maintain dense mode behavior on mobile */
+  }
+
+  .wewrite-viewer-paragraph.dense .paragraph-number,
+  .viewer-paragraph.dense-paragraph .paragraph-number {
+    @apply mr-3;
+    /* Proper spacing for paragraph numbers in dense mode on mobile */
+  }
 }
 
 /**