.forgejo/workflows/build-sveltekit.yml

@@ -1,9 +1,5 @@
 name: build-sveltekit
-
+on: [push, pull_request]
-on:
-  push:
-  pull_request:
-  workflow_dispatch:
 
 jobs:
   build:

.github/workflows/build-sveltekit.yml

@@ -1,39 +0,0 @@
-name: build-sveltekit
-
-on:
-  push:
-  pull_request:
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: Restore npm cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build SvelteKit app
-        run: npm run build
-
-      - name: Save npm cache
-        if: ${{ github.ref_name == github.event.repository.default_branch }}
-        uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}

src/lib/styles/main.css

@@ -26,8 +26,6 @@
     --settings-input-border-color: #333;
 
     --shadow-color: rgba(0, 0, 0, 0.3);
-
-    --root-width: 2 * calc(100vh - 3rem) + 60px;
 }
 
 [data-theme='light'] {
@@ -144,16 +142,11 @@ body {
     background-color: var(--bg-color);
     color: var(--text-color);
     padding-bottom: 1rem;
-    width: var(--root-width);
-}
-
-.main-content {
-    width: var(--root-width);
 }
 
 .root-bingo-container {
     display: flex;
-    width: var(--root-width);
+    width: 100vw;
     height: calc(100vh - 3rem);
     width: calc(100vw - 1rem);
 }
@@ -205,6 +198,8 @@ body {
     word-wrap: break-word;
     cursor: pointer;
     margin: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
 }
 
 .bingo-cell:hover, .bingo-cell.clicked:hover {

src/routes/+page.svelte

@@ -190,14 +190,14 @@ Bingo Item 25`;
       while (cell.scrollHeight > cell.clientHeight || cell.scrollWidth > cell.clientWidth) {
         fontSize--;
         cell.style.fontSize = `${fontSize}px`;
-        if (fontSize < 8) break; // Minimum font size limit
+        if (fontSize < 10) break; // Minimum font size limit
       };
       fontSize -= 2; // Reduce font size a bit more for better fit
       fontSize = Math.max(fontSize, 8); // Ensure font size doesn't go below 8px
       cell.style.fontSize = `${fontSize}px`;
       // apply wrapping after font adjustment
-      //cell.style.wordBreak = 'break-word';
+      cell.style.wordBreak = 'break-word';
-      //cell.style.overflowWrap = 'break-word';
+      cell.style.overflowWrap = 'break-word';
     });
   }