added workflow files

.forgejo/workflows/build-sveltekit.yml

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

.github/workflows/build-sveltekit.yml

@@ -0,0 +1,39 @@
+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,6 +26,8 @@
     --settings-input-border-color: #333;
 
     --shadow-color: rgba(0, 0, 0, 0.3);
+
+    --root-width: 2 * calc(100vh - 3rem) + 60px;
 }
 
 [data-theme='light'] {
@@ -142,11 +144,16 @@ 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: 100vw;
+    width: var(--root-width);
     height: calc(100vh - 3rem);
     width: calc(100vw - 1rem);
 }
@@ -198,8 +205,6 @@ 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 < 10) break; // Minimum font size limit
+        if (fontSize < 8) 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';
     });
   }