Maximize mobile bingo board space - reduce all padding and optimize text display

Author: yuandrew

christmas-bingo/edit.html

@@ -483,25 +483,29 @@
             }
 
             .header {
-                padding: 20px;
-                margin-bottom: 15px;
+                padding: 15px;
+                margin-bottom: 10px;
                 border-radius: 0;
             }
 
             .content {
-                padding: 10px;
+                padding: 5px;
                 border-radius: 0;
             }
 
             .bingo-board {
-                gap: 4px;
+                gap: 3px;
             }
 
             .bingo-square {
-                aspect-ratio: 1; /* Keep squares square on mobile */
-                padding: 8px;
-                font-size: 0.75em;
+                aspect-ratio: 1;
+                padding: 6px;
+                font-size: 0.7em;
                 border-width: 2px;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
             }
 
             .bingo-square:active {
@@ -510,18 +514,23 @@
             }
 
             .square-content {
-                font-size: 0.7em;
-                line-height: 1.3;
+                font-size: 0.75em;
+                line-height: 1.2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
             }
 
             .square-number {
-                font-size: 0.65em;
-                padding: 2px 5px;
+                font-size: 0.6em;
+                padding: 1px 3px;
             }
 
             .challenge-badge {
-                font-size: 0.55em;
-                padding: 2px 5px;
+                font-size: 0.5em;
+                padding: 1px 3px;
             }
 
             .modal-overlay {
@@ -583,36 +592,37 @@
         /* Even smaller screens */
         @media (max-width: 480px) {
             .content {
-                padding: 8px;
+                padding: 3px;
             }
 
             .bingo-board {
-                gap: 3px;
+                gap: 2px;
             }
 
             .bingo-square {
-                aspect-ratio: 1; /* Keep squares square */
-                padding: 6px;
-                font-size: 0.68em;
+                aspect-ratio: 1;
+                padding: 4px;
+                font-size: 0.65em;
             }
 
             .square-content {
-                font-size: 0.65em;
-                line-height: 1.25;
+                font-size: 0.7em;
+                line-height: 1.15;
+                -webkit-line-clamp: 4;
             }
 
             .square-number {
-                font-size: 0.6em;
-                padding: 1px 4px;
+                font-size: 0.55em;
+                padding: 1px 2px;
             }
 
             .challenge-badge {
-                font-size: 0.5em;
+                font-size: 0.45em;
             }
 
             .bingo-square.completed::before,
             .bingo-square.pending::before {
-                font-size: 4em; /* Reduced from 5em to fit better */
+                font-size: 3.5em;
             }
         }
     </style>