chore(release): 1.13.3

commit 8c56aa3c46
Merge: f642849d 1505080a
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:57:14 2025 +0200

    Merge branch 'dev' into feature/anonyme-spende

commit f642849dbb
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:56:45 2025 +0200

    wip

commit 7ac92ae6ca
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:45:47 2025 +0200

    wip

commit 95af9f9914
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:44:02 2025 +0200

    i18n

commit 1004aee16c
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:40:23 2025 +0200

    implement DonationDonor

commit 0baf2fc460
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:38:27 2025 +0200

    wip

commit 09b59175ee
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:35:45 2025 +0200

    wip

commit a21f61f3f3
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:24:07 2025 +0200

    wip

.devcontainer/Dockerfile

@@ -1,5 +0,0 @@
-FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
-RUN apk update
-RUN apk add --upgrade nodejs-current npm
-RUN npm i -g pnpm rimraf
-RUN rimraf node_modules

.devcontainer/devcontainer.json

@@ -1,20 +0,0 @@
-{
-  "name": "Node.js",
-  "build": {
-    "dockerfile": "Dockerfile"
-  },
-  "settings": {
-    "terminal.integrated.shell.linux": "/bin/sh"
-  },
-  "extensions": [
-    "dbaeumer.vscode-eslint",
-    "2gua.rainbow-brackets",
-    "christian-kohler.npm-intellisense",
-    "remimarsal.prettier-now",
-    "svelte.svelte-vscode",
-    "lokalise.i18n-ally",
-    "fivethree.vscode-svelte-snippets",
-    "voorjaar.windicss-intellisense"
-  ],
-  "postCreateCommand": "yarn && yarn dev --open"
-}

.gitea/workflows/dev.yaml

@@ -1,34 +0,0 @@
-name: Build Latest and dev images
-on:
-  push:
-    branches:
-      - dev
-
-jobs:
-  build-container:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 19
-      - run: npm i -g pnpm@8 && pnpm i
-      - run: pnpm licenses:export
-      - name: Login to registry
-        uses: docker/login-action@v3
-        with:
-          registry: registry.odit.services
-          username: ${{ vars.REGISTRY_USERNAME }}
-          password: ${{ secrets.REGISTRY_PASSWORD }}
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          push: true
-          tags: |
-            ${{ vars.REGISTRY }}/lfk/frontend:dev
-            ${{ vars.REGISTRY }}/lfk/frontend:latest
-          platforms: linux/amd64,linux/arm64

.gitea/workflows/release.yaml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 19
-      - run: npm i -g pnpm@8 && pnpm i
+      - run: npm i -g pnpm@10.8 && pnpm i
       - run: pnpm licenses:export
       - name: Login to registry
         uses: docker/login-action@v3

CHANGELOG.md

@@ -2,11 +2,349 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.13.3](https://git.odit.services/lfk/frontend/compare/1.13.2...1.13.3)
+
+- Refactor code structure for improved readability and maintainability [`e3c6d5a`](https://git.odit.services/lfk/frontend/commit/e3c6d5a5c0eaac2c91432b0be37d6fa11e57f644)
+- refactor(donation): Refactor donor selection and add new donor creation functionality [`8c3f009`](https://git.odit.services/lfk/frontend/commit/8c3f0092d2735b1c85976f4e6955780b1035f68a)
+- fix(donation): Ensure all selections are cleared on reset [`4e1a944`](https://git.odit.services/lfk/frontend/commit/4e1a944a2d7d0d0666fb8d2181a9941d0f11957f)
+
+#### [1.13.2](https://git.odit.services/lfk/frontend/compare/1.13.1...1.13.2)
+
+> 16 May 2025
+
+- chore(release): 1.13.2 [`6fad04c`](https://git.odit.services/lfk/frontend/commit/6fad04c86249613dacfe2bc75362cb32d109573d)
+- feat(dashboard): Add permission checks for scan and donation creation links [`838dcbf`](https://git.odit.services/lfk/frontend/commit/838dcbfd7e0c09e8cf61a04952475934ad1e3b86)
+
+#### [1.13.1](https://git.odit.services/lfk/frontend/compare/1.13.0...1.13.1)
+
+> 16 May 2025
+
+- chore(release): 1.13.1 [`f5df252`](https://git.odit.services/lfk/frontend/commit/f5df252857f20f8426b8ca566b9bb3ec50331880)
+- feat(tools): Remove unnecessary validation display in donation creation [`285fc91`](https://git.odit.services/lfk/frontend/commit/285fc91c66d03aaa861da549cb739c3698beb892)
+
+#### [1.13.0](https://git.odit.services/lfk/frontend/compare/1.12.8...1.13.0)
+
+> 16 May 2025
+
+- feat(tools): Basic mobile scanner [`500886e`](https://git.odit.services/lfk/frontend/commit/500886e4106f4b53fbc40fb0fa15653f574c8328)
+- chore(release): 1.13.0 [`d95b6cf`](https://git.odit.services/lfk/frontend/commit/d95b6cf5894dd0b487353f36c9f3a436066fd4ef)
+- feat(tools): Added tool for fast sponsoring creation [`51ba1c8`](https://git.odit.services/lfk/frontend/commit/51ba1c852cad6243e935409da1eacecc5dcfa5fa)
+- feat(dev): Enable devserver with https-support to circumvent ios https requirements for camera access [`25c38ea`](https://git.odit.services/lfk/frontend/commit/25c38ea3812a529a90294ff8834bdb65c487f8c4)
+- feat(tools): Remove requirement for ten-diget codes [`80ca7aa`](https://git.odit.services/lfk/frontend/commit/80ca7aa08bdd44591e2d3efaa8e59dd4db5c864e)
+- feat(dashboard): Added scanclient tool to dashboard [`06cfd60`](https://git.odit.services/lfk/frontend/commit/06cfd603cae79e0237bbece43203083f198d03a1)
+
+#### [1.12.8](https://git.odit.services/lfk/frontend/compare/1.12.7...1.12.8)
+
+> 1 May 2025
+
+- chore(release): 1.12.8 [`51d9b35`](https://git.odit.services/lfk/frontend/commit/51d9b35dc41fea0d0245fd136556f9fada3559da)
+- feat(dasboard): Added section headers to main nav [`3a8533a`](https://git.odit.services/lfk/frontend/commit/3a8533a7baef02f7bc9780ce37be1a350bd92270)
+- fic(locales): Updated dashboard translations [`5ac6fe3`](https://git.odit.services/lfk/frontend/commit/5ac6fe30b5b9e34043c734d51d5da137fdf7ac38)
+- feat(runners): Created_via filters can now be set via query params [`14501d3`](https://git.odit.services/lfk/frontend/commit/14501d3828dd0d48ba0baeeddf936ba275f7b9b7)
+- refactor(tools): Move tools to tools route [`16dc789`](https://git.odit.services/lfk/frontend/commit/16dc789db5d9ea41774c77622a579cc0d9bd95f2)
+- refactor(tools): Move tools into shared directory instead of the non-descript "general" [`e4f9b1a`](https://git.odit.services/lfk/frontend/commit/e4f9b1a60551d7955def4d068d534cf17b1ea640)
+
+#### [1.12.7](https://git.odit.services/lfk/frontend/compare/1.12.6...1.12.7)
+
+> 1 May 2025
+
+- chore(release): 1.12.7 [`c78bdfa`](https://git.odit.services/lfk/frontend/commit/c78bdfa5e24ada4909455064dd6b05cf34fc6df3)
+- fix(deps): fresh lockfile [`b2ed2af`](https://git.odit.services/lfk/frontend/commit/b2ed2afd8a45a1a01ac6118b27941e3b4b3b611f)
+- refactor(store): update refresh interval from 2min to 60min [`00d1988`](https://git.odit.services/lfk/frontend/commit/00d198895e15174b70a8d229974b4baa7d0ed8fc)
+
+#### [1.12.6](https://git.odit.services/lfk/frontend/compare/1.12.5...1.12.6)
+
+> 1 May 2025
+
+- feat(pdfs): Experimental generation of large runner card files [`93422b9`](https://git.odit.services/lfk/frontend/commit/93422b97799c5e45c89acadd34f33b1a11b04617)
+- chore(release): 1.12.6 [`b5c079d`](https://git.odit.services/lfk/frontend/commit/b5c079da9a0545d146e9f3029a543e04c907add3)
+
+#### [1.12.5](https://git.odit.services/lfk/frontend/compare/1.12.4...1.12.5)
+
+> 1 May 2025
+
+- chore(release): 1.12.5 [`6dcfd9a`](https://git.odit.services/lfk/frontend/commit/6dcfd9a4fedd1e44894c9803482576bc650fb4db)
+- fix(locales): Fixed translation [`2139524`](https://git.odit.services/lfk/frontend/commit/21395241de4de8f3a6b8404758d09c01d8a6f95f)
+- feat(runners): Show total donations in runner detail [`f27c716`](https://git.odit.services/lfk/frontend/commit/f27c716296e228ecccbf500a21130f1bc47ea52d)
+- chore(deps): Bump @odit/lfk-client-js to 1.2.7 [`6d19199`](https://git.odit.services/lfk/frontend/commit/6d1919974aacd74a265cf9ce0c9ed501028f0aa3)
+- fix: Update release script to include --only-version flag [`8d2cb13`](https://git.odit.services/lfk/frontend/commit/8d2cb13195856f47022d414f3243e9a21457832b)
+
+#### [1.12.4](https://git.odit.services/lfk/frontend/compare/1.12.3...1.12.4)
+
+> 28 April 2025
+
+- chore(release): 1.12.4 [`e61e8b0`](https://git.odit.services/lfk/frontend/commit/e61e8b063af75539b7db93c5ca42965417019f29)
+- fix: Disable ios auto zooming on inputs [`073c78d`](https://git.odit.services/lfk/frontend/commit/073c78d98afd1c2f08b190aeda942a634e9bb888)
+
+#### [1.12.3](https://git.odit.services/lfk/frontend/compare/1.12.2...1.12.3)
+
+> 28 April 2025
+
+- feat: Fast card replacement view [`7f802d5`](https://git.odit.services/lfk/frontend/commit/7f802d57f81d913634f28e2def29c183b0fdd098)
+- chore(release): 1.12.3 [`85e4faf`](https://git.odit.services/lfk/frontend/commit/85e4faf898b4844bb2fcaf87e332c1471ef14b57)
+
+#### [1.12.2](https://git.odit.services/lfk/frontend/compare/1.12.1...1.12.2)
+
+> 28 April 2025
+
+- feat(cardassignment): Now with hand scanner support [`9e8c236`](https://git.odit.services/lfk/frontend/commit/9e8c236281f6686318c27dcb1bd02dfbc2b30ee8)
+- chore(release): 1.12.2 [`868dc3f`](https://git.odit.services/lfk/frontend/commit/868dc3f7e23f42f6bf1f752272ad21673be9c1c4)
+
+#### [1.12.1](https://git.odit.services/lfk/frontend/compare/1.12.0...1.12.1)
+
+> 28 April 2025
+
+- chore(release): 1.12.1 [`827fb31`](https://git.odit.services/lfk/frontend/commit/827fb317bc946268e4a1d60b15f3805b67b240f6)
+- fix(donations): Don't show enter payment for anon donations [`32f72df`](https://git.odit.services/lfk/frontend/commit/32f72df10583a08efb26e0983c0c5c829ab03e19)
+- chore(deps): Fresh lock [`1ec8e21`](https://git.odit.services/lfk/frontend/commit/1ec8e2186bdcd69c2acbc785feef4927973bc986)
+- fix(donations): Support anon donations in deletion modal [`27187b4`](https://git.odit.services/lfk/frontend/commit/27187b428da1e757f85392d77d49670f51a19829)
+- fix(donations): Don't show details for anon donations [`ecd418c`](https://git.odit.services/lfk/frontend/commit/ecd418c5db0910d64cdf5336d72a10ebff38e065)
+- refactor(i18n): Update translations [`77a4328`](https://git.odit.services/lfk/frontend/commit/77a432817ef644ff1be8a5ebcd284b7d67f742bd)
+- fix(donations): Remove paid from anon donations [`31a4ff9`](https://git.odit.services/lfk/frontend/commit/31a4ff9d909742df3ed3d6cecae57870e287afcc)
+- fix(donations): Move amount to extra line [`edd5da8`](https://git.odit.services/lfk/frontend/commit/edd5da89a7e741d48078125f68b6dd6d3d88a7a1)
+- refactor(i18n): Shortened translation [`657fb04`](https://git.odit.services/lfk/frontend/commit/657fb04f1b5b439ef5fac834740ba00548b758de)
+- feat(donation): Use new endpoint for creating anon donations [`e28f543`](https://git.odit.services/lfk/frontend/commit/e28f543d89efff80a84131df59bfb26a5ea92d14)
+- fix(donations): Translate modal title [`dc1e6b7`](https://git.odit.services/lfk/frontend/commit/dc1e6b7a67c4761a007ffe3b71fd851fb569fb7c)
+- chore(deps): Bump @odit/lfk-client-js [`cb315d9`](https://git.odit.services/lfk/frontend/commit/cb315d94fd2331bd49aa6d54b9ca0bfbf11f00d9)
+- feat(shared): Hide link while keeping width [`724e844`](https://git.odit.services/lfk/frontend/commit/724e84441e8b71b7d89a8c3804467edebfd58365)
+
+#### [1.12.0](https://git.odit.services/lfk/frontend/compare/1.11.5...1.12.0)
+
+> 28 April 2025
+
+- feat: anonymous donations [`9c03e35`](https://git.odit.services/lfk/frontend/commit/9c03e359a4e8f43452475b02bcabcb354987ab75)
+- refactor: use modern tailwindcss features [`1505080`](https://git.odit.services/lfk/frontend/commit/1505080afdd8b272b76584e2777df732001ce004)
+- chore(release): 1.12.0 [`5dcb4cb`](https://git.odit.services/lfk/frontend/commit/5dcb4cb508b204c5634804811a9f37db78e764ce)
+
+#### [1.11.5](https://git.odit.services/lfk/frontend/compare/1.11.4...1.11.5)
+
+> 25 April 2025
+
+- chore(release): 1.11.5 [`8cb6093`](https://git.odit.services/lfk/frontend/commit/8cb6093f0b3474c0952a8a51a47683262fc31f8f)
+- fix(cards): Update table for edit events [`27396e1`](https://git.odit.services/lfk/frontend/commit/27396e17f2cd8be72c9c8100afe6ec75ac66dceb)
+
+#### [1.11.4](https://git.odit.services/lfk/frontend/compare/1.11.3...1.11.4)
+
+> 25 April 2025
+
+- feat(CardAssign): styled buttons [`f9993c6`](https://git.odit.services/lfk/frontend/commit/f9993c60f565d7270b3a269e934b42b945c24b99)
+- chore(release): 1.11.4 [`fefd5c8`](https://git.odit.services/lfk/frontend/commit/fefd5c8237b91ac7fd7ecf467a6feb1100f84811)
+- feat(CardAssignment): support EAN13 [`8e314f8`](https://git.odit.services/lfk/frontend/commit/8e314f8676e5c189c09a33c9a382a8b984af5e30)
+
+#### [1.11.3](https://git.odit.services/lfk/frontend/compare/1.11.2...1.11.3)
+
+> 25 April 2025
+
+- chore(deps): Updated lock [`bce6d48`](https://git.odit.services/lfk/frontend/commit/bce6d484a9b1d7c40d4575a64ad528da2cc8fb3c)
+- chore(release): 1.11.3 [`98a3b07`](https://git.odit.services/lfk/frontend/commit/98a3b072370f029f82f79a75b8f809bc1b41d82f)
+- fix(cards): Z-Index for bulk card modal [`efad6fd`](https://git.odit.services/lfk/frontend/commit/efad6fdf2eae12c904575727b61fc61ed8a27d14)
+
+#### [1.11.2](https://git.odit.services/lfk/frontend/compare/1.11.1...1.11.2)
+
+> 23 April 2025
+
+- chore(release): 1.11.2 [`2dea19d`](https://git.odit.services/lfk/frontend/commit/2dea19df8990b34a56a345fef05487684ecec8c4)
+- fix(cardassignment): handle card not found [`6c98646`](https://git.odit.services/lfk/frontend/commit/6c986467d39344a32e598b834a115932ab8c9a1f)
+
+#### [1.11.1](https://git.odit.services/lfk/frontend/compare/1.11.0...1.11.1)
+
+> 22 April 2025
+
+- chore(release): 1.11.1 [`3cedbeb`](https://git.odit.services/lfk/frontend/commit/3cedbebe40b7699e39edc133e4bcbc16f4e7eb56)
+- ci: fix build [`dc986e4`](https://git.odit.services/lfk/frontend/commit/dc986e4fe5d462909e34b8bbf9a3c10accb2a00b)
+
+#### [1.11.0](https://git.odit.services/lfk/frontend/compare/1.10.6...1.11.0)
+
+> 22 April 2025
+
+- chore: move to tailwind v4 [`81a8ce0`](https://git.odit.services/lfk/frontend/commit/81a8ce002cd5a470f5ac4f064360c09bcf815ac8)
+- chore(deps): bump [`244be47`](https://git.odit.services/lfk/frontend/commit/244be471f07a6ab77768fb599cc2381a319e4e22)
+- chore: move privacy & imprint to website links [`3288ffb`](https://git.odit.services/lfk/frontend/commit/3288ffb3cc52bcfbb2b94c373932e9d614fba80f)
+- fix: modal position & z index [`a12c4f8`](https://git.odit.services/lfk/frontend/commit/a12c4f87d2db2271a6b123c3a009bd8d2f7663a4)
+- chore: tailwind class cleanup [`80ab4e0`](https://git.odit.services/lfk/frontend/commit/80ab4e037e44edf1f076d4a365ef36c614e7cb0a)
+- fix(cardassignment): debounce w/ immediate start [`1d6ed99`](https://git.odit.services/lfk/frontend/commit/1d6ed990736c6156b67f0715ee1f86aeb2be0390)
+- fix(RunnerDetail): move to standard html select for groups [`e1bf435`](https://git.odit.services/lfk/frontend/commit/e1bf435080a3845a4a29f9b8bce7aba3e9220cf9)
+- chore(release): 1.11.0 [`cae6be6`](https://git.odit.services/lfk/frontend/commit/cae6be6f867aece8997799e90f783a7b5f9b7602)
+- feat(ImportRunnerModal): sort groups by name [`3124574`](https://git.odit.services/lfk/frontend/commit/312457494cb0da805df5ec2811604ea45a09963d)
+- feat(cards): badge style for runner links [`1605b0f`](https://git.odit.services/lfk/frontend/commit/1605b0f7b2c12d2b247f40aefc03d2d053fea60d)
+
+#### [1.10.6](https://git.odit.services/lfk/frontend/compare/1.10.5...1.10.6)
+
+> 22 April 2025
+
+- feat: improved mobile card assignment [`d841727`](https://git.odit.services/lfk/frontend/commit/d841727439e42c940d56001f08da4ae2399176a7)
+- chore(release): 1.10.6 [`3fab344`](https://git.odit.services/lfk/frontend/commit/3fab3447799a5a28db741643189a2c4217b03714)
+
+#### [1.10.5](https://git.odit.services/lfk/frontend/compare/1.10.4...1.10.5)
+
+> 22 April 2025
+
+- chore(release): 1.10.5 [`87df34b`](https://git.odit.services/lfk/frontend/commit/87df34bb56c04c1efd22ecbe0b857198358f93d5)
+- feat(runners): add distance sorting [`9c3b742`](https://git.odit.services/lfk/frontend/commit/9c3b742a98e17837fbcabe308fb2774dc13b03b8)
+
+#### [1.10.4](https://git.odit.services/lfk/frontend/compare/1.10.3...1.10.4)
+
+> 22 April 2025
+
+- chore(release): 1.10.4 [`68bf371`](https://git.odit.services/lfk/frontend/commit/68bf3717f9cf15a547c51e245452d4e013f7acad)
+- fix(runners): Fix runner overview sort [`f88c6e0`](https://git.odit.services/lfk/frontend/commit/f88c6e0dbab620887e180de0d3eab03b8215a477)
+
+#### [1.10.3](https://git.odit.services/lfk/frontend/compare/1.10.2...1.10.3)
+
+> 17 April 2025
+
+- feat(pdf): Send selfservicelink for generation [`01e77a9`](https://git.odit.services/lfk/frontend/commit/01e77a97f3f28700e0249d35afd9641b56d9c55d)
+- chore(release): 1.10.3 [`12050cd`](https://git.odit.services/lfk/frontend/commit/12050cdda95b5f8eb5b414b81655d06faae3ef1e)
+- chore(deps): Bump @odit/lfk-client-js [`10824b5`](https://git.odit.services/lfk/frontend/commit/10824b5d9b207e14a37fa23e90d54337d76e60a9)
+
+#### [1.10.2](https://git.odit.services/lfk/frontend/compare/1.10.1...1.10.2)
+
+> 11 April 2025
+
+- refactor(runners): filter table for created_via [`785b9e0`](https://git.odit.services/lfk/frontend/commit/785b9e0b60a9961f99d0c519d6bb12dc735ac605)
+- chore(release): 1.10.2 [`d9870e0`](https://git.odit.services/lfk/frontend/commit/d9870e03bc3175ee9b299174a19f257d6046a718)
+
+#### [1.10.1](https://git.odit.services/lfk/frontend/compare/1.10.0...1.10.1)
+
+> 9 April 2025
+
+- feat: runner list filtered by created_via [`991716a`](https://git.odit.services/lfk/frontend/commit/991716a7f55d0414111ad264ad1e93de9e82971a)
+- chore(release): 1.10.1 [`fce2bc6`](https://git.odit.services/lfk/frontend/commit/fce2bc645e040322f4d1b98a1ed1ab5df7227b6d)
+
+#### [1.10.0](https://git.odit.services/lfk/frontend/compare/1.9.11...1.10.0)
+
+> 9 April 2025
+
+- feat: working CardAssignment [`ac4ef8f`](https://git.odit.services/lfk/frontend/commit/ac4ef8fb6ded5c5d5678a651420e356b3ef45399)
+- chore(release): 1.10.0 [`aa720f2`](https://git.odit.services/lfk/frontend/commit/aa720f2460079e35eed9d87a2ac580a3305efbd5)
+
+#### [1.9.11](https://git.odit.services/lfk/frontend/compare/1.9.10...1.9.11)
+
+> 8 April 2025
+
+- feat(dash): add runnersViaKiosk [`5291f8a`](https://git.odit.services/lfk/frontend/commit/5291f8a4d1721cd0c745191ebc85f221c34a23c8)
+- chore(release): 1.9.11 [`eae0afd`](https://git.odit.services/lfk/frontend/commit/eae0afda23a54020e25821c0188d8cbec3139593)
+
+#### [1.9.10](https://git.odit.services/lfk/frontend/compare/1.9.9...1.9.10)
+
+> 8 April 2025
+
+- feat: add experimental ui for mobile card assignment [`d7c9c27`](https://git.odit.services/lfk/frontend/commit/d7c9c27ec7a1fea1cbaf26914843d044bbae32fe)
+- chore(release): 1.9.10 [`e2d7de1`](https://git.odit.services/lfk/frontend/commit/e2d7de1e9e1fd134f54876fa80f19f94fbea3672)
+
+#### [1.9.9](https://git.odit.services/lfk/frontend/compare/1.9.8...1.9.9)
+
+> 4 April 2025
+
+- chore(release): 1.9.9 [`153b1b3`](https://git.odit.services/lfk/frontend/commit/153b1b3c2badee4826be614c3dbaafc10e1fbfea)
+- fix(CopyScanStationTokenModal): code sizes [`ec63c7c`](https://git.odit.services/lfk/frontend/commit/ec63c7c1c51ccaf25bdd1eacffda66c820003a4c)
+
+#### [1.9.8](https://git.odit.services/lfk/frontend/compare/1.9.7...1.9.8)
+
+> 2 April 2025
+
+- feat(GenerateSponsoringContracts): show download progress [`e261d5e`](https://git.odit.services/lfk/frontend/commit/e261d5e345f3175672bf86646ed838dd23400e50)
+- chore(release): 1.9.8 [`05c2535`](https://git.odit.services/lfk/frontend/commit/05c253569877a45f3c4759262255ca70aa9ee4a3)
+
+#### [1.9.7](https://git.odit.services/lfk/frontend/compare/1.9.6...1.9.7)
+
+> 2 April 2025
+
+- fix: ImportRunnerModal scrolling & team select [`766eeab`](https://git.odit.services/lfk/frontend/commit/766eeab49fb3ca5715c19dbf9bc53cb71124d3df)
+- chore(release): 1.9.7 [`c00497d`](https://git.odit.services/lfk/frontend/commit/c00497d7760a935965cc83213f72f35999a3c168)
+
+#### [1.9.6](https://git.odit.services/lfk/frontend/compare/1.9.5...1.9.6)
+
+> 29 March 2025
+
+- chore(release): 1.9.6 [`3c9b404`](https://git.odit.services/lfk/frontend/commit/3c9b404234c7d7d2f0c48256be2130a0ed8ae047)
+- pnpm allow builds [`9c56b38`](https://git.odit.services/lfk/frontend/commit/9c56b3883eeab9e1a5e1c4921bfb6528c230e0d4)
+
+#### [1.9.5](https://git.odit.services/lfk/frontend/compare/1.9.4...1.9.5)
+
+> 29 March 2025
+
+- feat: modal improvements [`d7e84a7`](https://git.odit.services/lfk/frontend/commit/d7e84a79a892294d532cc93aa3391c14a7a5ce99)
+- chore(release): 1.9.5 [`3d506db`](https://git.odit.services/lfk/frontend/commit/3d506db97502399e8b381b4cf38af2f07a584aec)
+
+#### [1.9.4](https://git.odit.services/lfk/frontend/compare/1.9.3...1.9.4)
+
+> 29 March 2025
+
+- feat: improve modals [`90b0fec`](https://git.odit.services/lfk/frontend/commit/90b0fec2366b608d163decdcd8798e879cf8218d)
+- chore(release): 1.9.4 [`102471e`](https://git.odit.services/lfk/frontend/commit/102471eaaae390d3ef815afde9ac4081be7d5dbc)
+
+#### [1.9.3](https://git.odit.services/lfk/frontend/compare/1.9.2...1.9.3)
+
+> 29 March 2025
+
+- feat: modal improvements [`fbe38ee`](https://git.odit.services/lfk/frontend/commit/fbe38eede95813e163a390b693790d78ce75c215)
+- feat: modal improvements [`22551c3`](https://git.odit.services/lfk/frontend/commit/22551c379f704b0d9c28c499f7d3f5a37f1533ca)
+- ci: only tagged runs for now [`e9dffce`](https://git.odit.services/lfk/frontend/commit/e9dffcea835cbcd6b5eb4ed1cc3feb62a9e831db)
+- chore(release): 1.9.3 [`4883e17`](https://git.odit.services/lfk/frontend/commit/4883e179e7090cf90783dcdecd5df8a422880188)
+- feat: modal improvements [`13c6e96`](https://git.odit.services/lfk/frontend/commit/13c6e96292613d9619f779f2557201cf0b938753)
+- feat(OrgDetail): improve selfservice link copy [`f547c0c`](https://git.odit.services/lfk/frontend/commit/f547c0cc817d7db0c70df4059dad753e9b16c1c9)
+- chore(deps): pnpm@10.7 [`b9563d7`](https://git.odit.services/lfk/frontend/commit/b9563d75dd15519d9ec5d425d628d232e7609913)
+- fix: sidebar [`a102af5`](https://git.odit.services/lfk/frontend/commit/a102af5a78c83cd54b4981bff2f6c8d54cf8c74c)
+
+#### [1.9.2](https://git.odit.services/lfk/frontend/compare/1.9.1...1.9.2)
+
+> 28 March 2025
+
+- chore: update lfk client [`f4542ad`](https://git.odit.services/lfk/frontend/commit/f4542adf3b7c757d907c979b989450b64553d750)
+- feat(dashboard): show runners via selfservice count [`0ee43f8`](https://git.odit.services/lfk/frontend/commit/0ee43f80a65bb5b83d51d6c098bd203bc09e2f1f)
+- chore(release): 1.9.2 [`3a56942`](https://git.odit.services/lfk/frontend/commit/3a569422ad7d68d0009fa73229dd73ee00be87a9)
+- refactor: change release message [`9f0623d`](https://git.odit.services/lfk/frontend/commit/9f0623d194a7784d4ede3cb6a6cd10d0aea4a180)
+
+#### [1.9.1](https://git.odit.services/lfk/frontend/compare/1.9.0...1.9.1)
+
+> 28 March 2025
+
+- refactor: project cleanup [`04897c7`](https://git.odit.services/lfk/frontend/commit/04897c7d2e89cb7e834815907409698ad6758637)
+- 🚀RELEASE v1.9.1 [`5bab95a`](https://git.odit.services/lfk/frontend/commit/5bab95a9423d9da8c17165732b988ca868f950a5)
+- feat(RunnerDetail): show created_via [`a4fbaba`](https://git.odit.services/lfk/frontend/commit/a4fbabaf9a0a9a26b6c6782056f11b8a646b8f16)
+- feat(ConfirmTeamDeletionModal): success toast [`831f369`](https://git.odit.services/lfk/frontend/commit/831f36946d5db777ca77855161f653f861cbd56e)
+
+#### [1.9.0](https://git.odit.services/lfk/frontend/compare/1.8.2...1.9.0)
+
+> 28 March 2025
+
+- feat: improved ConfirmOrgDeletionModal [`fecf3b5`](https://git.odit.services/lfk/frontend/commit/fecf3b59a320afafee52c95b361edec644c5cbff)
+- feat: modal improvements [`f5a46aa`](https://git.odit.services/lfk/frontend/commit/f5a46aa203ca2adf2e4e6fe4863629ca80f1becb)
+- feat: improve ConfirmTeamDeletionModal [`a2cd54f`](https://git.odit.services/lfk/frontend/commit/a2cd54fba4a987f7f7dbab22cc958f9aea2817ff)
+- feat: improve modals [`443371e`](https://git.odit.services/lfk/frontend/commit/443371e2fdc42506e6e87379bd65facbd8f22d7d)
+- feat: improve toasts [`481f6b6`](https://git.odit.services/lfk/frontend/commit/481f6b686e77ffa36ee08b62f653d626dd9124c9)
+- feat: improve modals [`e7a69eb`](https://git.odit.services/lfk/frontend/commit/e7a69ebdca668a5d78b52d092aa1bca6259aa19b)
+- 🚀RELEASE v1.9.0 [`b7e6fda`](https://git.odit.services/lfk/frontend/commit/b7e6fdaeacf17a7cc77109460b5e2c6d3775ef7b)
+- feat: improve translations [`d7ab924`](https://git.odit.services/lfk/frontend/commit/d7ab9247cd2eab4f7269b23de5fada76a99ac8bc)
+- feat: improved translations [`18a4623`](https://git.odit.services/lfk/frontend/commit/18a4623e71dfd942f2268203ce713030acfb2d9d)
+- feat: improve translations [`9048f3d`](https://git.odit.services/lfk/frontend/commit/9048f3df774df233705a41b08012193447eab803)
+- feat: improved sidebar z-index [`968a7cc`](https://git.odit.services/lfk/frontend/commit/968a7ccc0e7917bf1a42ac8f85f358880951cc2a)
+- feat: improved track deletion ui feedback [`194c3c4`](https://git.odit.services/lfk/frontend/commit/194c3c4886e3f3206d76d8634be9d3dd2fa02d8d)
+
+#### [1.8.2](https://git.odit.services/lfk/frontend/compare/1.8.1...1.8.2)
+
+> 26 March 2025
+
+- feat: improvement of card,certificate,sponsoringcontract action buttons [`7633b7b`](https://git.odit.services/lfk/frontend/commit/7633b7b05671342bc30e0bbecbcd9450e06b5e4d)
+- 🚀RELEASE v1.8.2 [`6249502`](https://git.odit.services/lfk/frontend/commit/6249502a88ec5bfba6dfbc3ad5ede82d71d0d9e2)
+- feat(dashboard): active item for teams + runners [`8a78034`](https://git.odit.services/lfk/frontend/commit/8a780340792445fff1f78db994fb78acb5da8304)
+
+#### [1.8.1](https://git.odit.services/lfk/frontend/compare/1.8.0...1.8.1)
+
+> 26 March 2025
+
+- 🚀RELEASE v1.8.1 [`b8e6b24`](https://git.odit.services/lfk/frontend/commit/b8e6b24bf32379c3f4a1679d422e6fdcc45f7c99)
+- fix(pdf_generation): Only load direct runners for direct calls [`97b7ca9`](https://git.odit.services/lfk/frontend/commit/97b7ca931f607ee64509ad10c2269632fc691091)
+
 #### [1.8.0](https://git.odit.services/lfk/frontend/compare/1.7.0...1.8.0)
 
+> 26 March 2025
+
 - wip [`824ecfa`](https://git.odit.services/lfk/frontend/commit/824ecfab2e976cd7c6cd2851be8a9be5c6b686e1)
 - wip [`0a6cf61`](https://git.odit.services/lfk/frontend/commit/0a6cf619b09be837d5503f4695250c7edaeeaff5)
 - feat: improve fonts + button positions [`c37fb98`](https://git.odit.services/lfk/frontend/commit/c37fb98bed377744981e927ea8d22db9e20c55ca)
+- 🚀RELEASE v1.8.0 [`48dd9ac`](https://git.odit.services/lfk/frontend/commit/48dd9acde595b882630855d5e6af3cfa18fc9ecf)
 - wip [`1bc5314`](https://git.odit.services/lfk/frontend/commit/1bc53146b9f024f3cab613b227d29304d687c92b)
 - wip [`e82350d`](https://git.odit.services/lfk/frontend/commit/e82350df4af082d2bbb322658c6c022d83b819ae)
 - wip [`37cdbba`](https://git.odit.services/lfk/frontend/commit/37cdbba0a3563875e19bee560f2cd5c8fc2d7a6e)

Dockerfile

@@ -2,8 +2,8 @@ FROM registry.odit.services/hub/library/node:23.10.0-alpine3.21 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 
-COPY package.json pnpm-lock.yaml vite.config.js tailwind.config.cjs postcss.config.cjs index.html ./
+COPY package.json pnpm-lock.yaml vite.config.js index.html ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@9
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@10.8
 RUN mkdir /pnpm && pnpm config set store-dir /pnpm && pnpm i
 
 COPY src ./src

index.html

@@ -6,14 +6,14 @@
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="apple-touch-icon" href="/lfk-logo.png" />
     <meta name="theme-color" content="#FFFFFF" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="description" content="Lauf Für Kaya! - Admin" />
     <title>Lauf für Kaya! - Admin</title>
   </head>
 
   <body>
     <span style="display: none; visibility: hidden" id="buildinfo"
-      >RELEASE_INFO-1.8.0-RELEASE_INFO</span
+      >RELEASE_INFO-1.13.3-RELEASE_INFO</span
     >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script src="/env.js"></script>

package.json

@@ -1,38 +1,38 @@
 {
   "name": "@odit/lfk-frontend",
-  "version": "1.8.0",
+  "version": "1.13.3",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",
     "dev": "vite",
     "format": "prettier --write --plugin-search-dir=. .",
     "build": "vite build",
-    "release": "release-it",
+    "release": "release-it --only-version",
     "licenses:export": "license-exporter --json -o public"
   },
   "license": "CC-BY-NC-SA-4.0",
   "devDependencies": {
     "@odit/license-exporter": "0.2.0",
     "@sveltejs/vite-plugin-svelte": "2.1.1",
+    "@types/papaparse": "^5.3.15",
+    "@types/underscore": "^1.13.0",
     "auto-changelog": "2.5.0",
-    "autoprefixer": "10.4.21",
-    "postcss": "8.5.3",
     "prettier": "3.5.3",
     "prettier-plugin-svelte": "3.3.3",
     "release-it": "17.10.0",
     "svelte-select": "3.17.0",
-    "tailwindcss": "3.4.15",
+    "vite": "6.3.2",
-    "vite": "4.3.3"
+    "vite-plugin-mkcert": "^1.17.8"
   },
   "release-it": {
     "git": {
       "commit": true,
       "requireCleanWorkingDir": false,
-      "commitMessage": "🚀RELEASE v${version}",
+      "commitMessage": "chore(release): ${version}",
       "push": true,
       "tag": true,
-      "tagName": null,
+      "tagName": "${version}",
-      "tagAnnotation": "v${version}"
+      "tagAnnotation": "${version}"
     },
     "npm": {
       "publish": false
@@ -42,19 +42,23 @@
     }
   },
   "dependencies": {
+    "@bwip-js/browser": "^4.6.0",
     "@fontsource/athiti": "^5.2.5",
-    "@odit/lfk-client-js": "1.1.3",
+    "@odit/lfk-client-js": "1.2.7",
     "@paralleldrive/cuid2": "2.2.2",
+    "@tailwindcss/vite": "^4.1.4",
     "@tanstack/svelte-table": "8.9.1",
-    "bwip-js": "3.4.0",
     "check-password-strength": "2.0.10",
-    "csvtojson": "2.0.10",
+    "html5-qrcode": "^2.3.8",
     "localforage": "1.10.0",
-    "marked": "4.3.0",
+    "papaparse": "^5.5.2",
+    "svelecte": "3",
     "svelte": "3.58.0",
     "svelte-french-toast": "1.2.0",
-    "svelte-i18n": "3.6.0",
+    "svelte-i18n": "4.0.1",
+    "tailwindcss": "^4.1.4",
     "tinro": "0.6.12",
+    "underscore": "^1.13.7",
     "validator": "13.15.0",
     "xlsx": "0.18.5"
   },

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - es5-ext
+  - esbuild

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

public/logo.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118">
-  <path fill="#ff3e00" d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8A31.25 31.25 0 001.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"/>
-  <path fill="#fff" d="M40.9 103.9a21.8 21.8 0 01-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 008.8 2L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6a6.56 6.56 0 00-8.8-1.9l-10.5 6.7a18.6 18.6 0 01-5.6 2.4 21.8 21.8 0 01-23.4-8.7 20.2 20.2 0 01-3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 00-8.8-1.9L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 008.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"/>
-</svg>

public/privacy_en.md

@@ -1 +0,0 @@
-Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.

src/App.svelte

@@ -41,6 +41,7 @@
   import Settings from "./components/settings/Settings.svelte";
   import Transition from "./components/base/Transition.svelte";
   import Orgs from "./components/orgs/Orgs.svelte";
+  import CardAssignment from "./components/tools/CardAssignment.svelte";
   import Runners from "./components/runners/Runners.svelte";
   import Footer from "./components/general/Footer.svelte";
   import TracksOverview from "./components/tracks/TracksOverview.svelte";
@@ -53,8 +54,6 @@
   import UserPermissions from "./components/users/UserPermissions.svelte";
   import GroupPermissions from "./components/groups/GroupPermissions.svelte";
   import RunnerDetail from "./components/runners/RunnerDetail.svelte";
-  import Imprint from "./components/general/Imprint.svelte";
-  import Privacy from "./components/general/Privacy.svelte";
   import ResetPassword from "./components/auth/ResetPassword.svelte";
   import Contacts from "./components/contacts/Contacts.svelte";
   import ContactDetail from "./components/contacts/ContactDetail.svelte";
@@ -71,6 +70,9 @@
   import Cards from "./components/cards/Cards.svelte";
   import StatsClients from "./components/statsclients/StatsClients.svelte";
   import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
+  import CardReplacement from "./components/tools/CardReplacement.svelte";
+  import ScanClient from "./components/tools/ScanClient.svelte";
+  import DonationCreate from "./components/tools/DonationCreate.svelte";
   store.init();
 </script>
 
@@ -87,14 +89,6 @@
     <Route path="/about">
       <About />
     </Route>
-  {:else if $router.path === "/imprint"}
-    <Route path="/imprint">
-      <Imprint />
-    </Route>
-  {:else if $router.path === "/privacy"}
-    <Route path="/privacy">
-      <Privacy />
-    </Route>
   {:else if $store.isLoggedIn}
     <Dashboard>
       <Transition>
@@ -134,13 +128,27 @@
           <Route path="/:trackid" let:params />
         </Route>
         <Route path="/runners/*">
-          <Route path="/">
+          <Route path="/" let:meta>
-            <Runners />
+            <Runners created_via={meta.query.created_via} />
           </Route>
           <Route path="/:runnerid" let:params>
             <RunnerDetail {params} />
           </Route>
         </Route>
+        <Route path="/tools/*">
+          <Route path="/cardassignment/">
+              <CardAssignment />
+          </Route>
+          <Route path="/cardreplacement/">
+              <CardReplacement />
+          </Route>
+          <Route path="/scanclient/">
+              <ScanClient />
+          </Route>
+          <Route path="/donationcreate/">
+              <DonationCreate />
+          </Route>
+        </Route>
         <Route path="/teams/*">
           <Route path="/">
             <Teams />

src/components/base/PromiseError.svelte

@@ -5,7 +5,7 @@
 
 <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
   <span class="inline-block align-middle mr-8">
-    <b class="capitalize">{$_("general_promise_error")}</b>
+    <b>{$_("general_promise_error")}</b>
     {error}
   </span>
 </div>

src/components/cards/AddCardBulkModal.svelte

@@ -91,14 +91,14 @@
 
 {#if bulk_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       bulk_modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -111,18 +111,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -135,18 +135,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-bulk-blanco-cards")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "just-enter-how-many-you-want-and-the-system-will-create-them"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="amount"
@@ -183,13 +183,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit_with_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create-and-generate-pdf")}
           </button>
@@ -198,7 +198,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit_without_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create-without-pdf")}
           </button>
@@ -207,7 +207,7 @@
               bulk_modal_open = false;
             }}
             type="button"
-            class="mr-auto mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="mr-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
           >
             {$_("cancel")}
           </button>

src/components/cards/AddCardModal.svelte

@@ -84,14 +84,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -104,18 +104,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -128,11 +128,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-card")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                   {$_(
@@ -140,7 +140,7 @@
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="donor"
@@ -148,7 +148,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -165,13 +165,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -180,7 +180,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/cards/CardDetailModal.svelte

@@ -78,14 +78,14 @@
 
 {#if edit_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       edit_modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -98,18 +98,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -122,16 +122,16 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("edit-a-card")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="runner"
@@ -139,7 +139,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -162,7 +162,7 @@
                       name="enabled"
                       type="checkbox"
                       checked={editable.enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                     {$_("this-card-is")}
                     {#if editable.enabled}
@@ -174,13 +174,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("save-changes")}
           </button>
@@ -189,7 +189,7 @@
               edit_modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/cards/CardRunner.svelte

@@ -6,7 +6,7 @@
 {#if !runner}
   {$_("non-blanko")}
 {:else}
-  <a href={`/runners/${runner.id}`}>
+  <a class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-blue-100 text-blue-800" href={`/runners/${runner.id}`}>
     {#if runner.middlename}
       {runner.firstname} {runner.middlename} {runner.lastname}
     {:else}

src/components/cards/Cards.svelte

@@ -20,7 +20,7 @@
         modal_open = true;
       }}
       type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("add-card")}
     </button>
@@ -29,7 +29,7 @@
         bulk_modal_open = true;
       }}
       type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("create-bulk-cards")}
     </button>

src/components/cards/CardsOverview.svelte

@@ -180,11 +180,9 @@
     bind:runner
     bind:editable
     bind:original_data
-    on:dataUpdated={(event) => {
+    on:dataUpdated={(editevent) => {
-      current_cards[
+      console.log(editevent.detail.card)
-        current_cards.findIndex((c) => c.id === event.detail.card.id)
+      current_cards = current_cards.filter((c) => c.id !== editevent.detail.card.id).concat([editevent.detail.card]).sort((a, b) => a.code - b.code);
-      ] = event.detail.card;
-      current_cards = current_cards;
       options.update((options) => ({
         ...options,
         data: current_cards,

src/components/cards/DeleteCardModal.svelte

@@ -34,14 +34,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -54,18 +54,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -78,15 +78,10 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
                 {$_("please-confirm-the-deletion-of-card")}
-                </p>
+              </h3>
-              </div>
               <div class="w-full">
                 {$_("card")} #{delete_card.code}<br />
                 <span class="inline-block">
@@ -104,11 +99,11 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -117,7 +112,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/contacts/AddContactModal.svelte

@@ -43,7 +43,7 @@
   $: address_zipcode_value = "";
   $: address_city_value = "";
   $: processed_last_submit = true;
-  $: address_checked = true;
+  $: address_checked = false;
   $: isPhoneValidOrEmpty =
     (phone_input_value.includes("+") &&
       isMobilePhone(
@@ -136,14 +136,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -156,18 +156,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -179,18 +179,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-contact")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-contact"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -345,7 +345,7 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                   </div>
                   <div class="ml-3 text-sm">
@@ -454,13 +454,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -469,7 +469,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/contacts/ContactDetail.svelte

@@ -162,7 +162,7 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
@@ -300,7 +300,7 @@
 					id="comments"
 					name="comments"
 					type="checkbox"
-					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 				/>
 			</div>
 			<div class="ml-3 text-sm">

src/components/contacts/ContactsOverview.svelte

@@ -151,7 +151,7 @@
 															(obj) => obj.id !== t.id
 														);
 														toast.dismiss();
-														toast($_("contact-deleted"));
+														toast.success($_("contact-deleted"));
 													});
 												}}
 												tabindex="0"
@@ -190,7 +190,7 @@
 	{:catch error}
 		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
 			<span class="inline-block align-middle mr-8">
-				<b class="capitalize">{$_("general_promise_error")}</b>
+				<b>{$_("general_promise_error")}</b>
 				{error}
 			</span>
 		</div>

src/components/dashboard/Dashboard.svelte

@@ -16,7 +16,8 @@
 <section class="min-h-screen bg-gray-50">
   <div
     class:collapsed_navigation={!navOpen}
-		class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
+    style="z-index:11;"
+    class="select-none fixed top-0 left-0 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
   >
     <a href="/" class="flex items-center px-4 py-5">
       <img src="/lfk-logo.png" alt="Logo" class="h-10" />
@@ -40,9 +41,101 @@
         </svg>
         <span>{$_("dashboard-title")}</span>
       </a>
+      <h2 class="px-4 py-2 text-xs font-semibold text-gray-600 uppercase">
+        {$_("quick-tools")}
+      </h2>
+      {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET") && store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+        <a
+          class:activenav={$router.path.includes("/tools/cardassignment/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          href="/tools/cardassignment/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+
+          <span>{$_("card_assignment_menu")}</span>
+        </a>
+        <a
+          class:activenav={$router.path.includes("/tools/cardreplacement/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          href="/tools/cardreplacement/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+
+          <span>{$_("card-replacement-menu")}</span>
+        </a>
+        {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
+        <a
+          class:activenav={$router.path.includes("/tools/scanclient/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          href="/tools/scanclient/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+
+          <span>{$_("scanclient")}</span>
+        </a>
+        {/if}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+        <a
+          class:activenav={$router.path.includes("/tools/donationcreate/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          href="/tools/donationcreate/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+
+          <span>{$_("donation-quick-add")}</span>
+        </a>
+        {/if}
+        <h2 class="px-4 py-2 text-xs font-semibold text-gray-600 uppercase">
+          {$_("management")}
+        </h2>
         {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
         <a
-					class:activenav={$router.path === "/runners/"}
+          class:activenav={$router.path.includes("/runners/")}
           class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
           href="/runners/"
         >
@@ -63,7 +156,7 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
         <a
-					class:activenav={$router.path === "/teams/"}
+          class:activenav={$router.path.includes("/teams/")}
           class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
           href="/teams/"
         >
@@ -318,6 +411,9 @@
           <span>{$_("user-groups")}</span>
         </a>
       {/if}
+	  <h2 class="px-4 py-2 text-xs font-semibold text-gray-600 uppercase">
+		  {$_("system")}
+        </h2>
       <a
         class:activenav={$router.path === "/settings/"}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"

src/components/dashboard/MainDashContent.svelte

@@ -8,7 +8,8 @@
 
 <div class="p-2 md:p-5 overflow-x-hidden">
 	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("dashboard-greeting")} <span class="text-blue-500"
+		{$_("dashboard-greeting")}
+		<span class="text-blue-500"
 			>{store.state.jwtinfo.userdetails.firstname}
 			{store.state.jwtinfo.userdetails.lastname}</span
 		>
@@ -216,11 +217,45 @@
 					/></svg
 				>
 			</StatCard>
+			<StatCard
+				title={$_("runner_via_selfservice")}
+				value={stats.runnersViaSelfservice}
+				href="/runners/?created_via=selfservice"
+			>
+				<svg
+					height="24"
+					width="24"
+					fill="currentColor"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					><path d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
+					/></svg
+				>
+			</StatCard>
+			<StatCard
+				title={$_('runners_via_kiosk')}
+				value={stats.runnersViaKiosk}
+				href="/runners/?created_via=kiosk"
+			>
+				<svg
+					height="24"
+					width="24"
+					fill="currentColor"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					><path d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
+					/></svg
+				>
+			</StatCard>
 		</div>
 	{:catch error}
 		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
 			<span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
+				<b>{$_("general_promise_error")}</b>
 				{error}
 			</span>
 		</div>

src/components/donations/AddDonationModal.svelte

@@ -21,7 +21,7 @@
 	$: runner = 0;
 	$: donors = [];
 	$: runners = [];
-  $: is_fixed = false;
+	$: type = "distance";
 	$: is_paid = false;
 	$: amount_input = 0;
 	$: processed_last_submit = true;
@@ -46,7 +46,7 @@
 			let amount_cent = Math.floor(amount_input * 100);
 			processed_last_submit = false;
 			toast.loading($_("adding-donation"));
-      if (is_fixed) {
+			if (type === "fixed") {
 				let postdata = {
 					donor,
 					amount: amount_cent,
@@ -72,7 +72,26 @@
 					.finally(() => {
 						processed_last_submit = true;
 					});
-      } else {
+			} else if (type === "anonymous") {
+				let postdata = {
+					amount: amount_cent,
+				};
+				DonationService.donationControllerPostAnonymous(postdata)
+					.then((result) => {
+						amount_input = 0;
+						modal_open = false;
+						//
+						toast.dismiss();
+						toast.success($_("donation_added"));
+						dispatch("created", { donations: [result] });
+					})
+					.catch((err) => {
+						//
+					})
+					.finally(() => {
+						processed_last_submit = true;
+					});
+			} else if (type === "distance") {
 				let postdata = {
 					donor,
 					runner,
@@ -100,33 +119,29 @@
 	}
 
 	onMount(async () => {
-    donors = (await DonorService.donorControllerGetAll()).map(
+		donors = (await DonorService.donorControllerGetAll()).map((r) => {
-      (r) => {
 			return { label: getDonorLabel(r), value: r };
-      }
+		});
-    );
+		runners = (await RunnerService.runnerControllerGetAll()).map((r) => {
-    runners = (await RunnerService.runnerControllerGetAll()).map(
-      (r) => {
 			return { label: getDonorLabel(r), value: r };
-      }
+		});
-    );
 	});
 </script>
 
 {#if modal_open}
 	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			modal_open = false;
 		}}
 	>
 		<div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
-          class="absolute inset-0 bg-gray-500 opacity-75"
+					class="absolute inset-0 bg-neutral-500 opacity-75"
 					data-id="modal_backdrop"
 				/>
 			</div>
@@ -135,18 +150,18 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+					<div class="">
 						<div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
-                class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -158,41 +173,98 @@
 								/></svg
 							>
 						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+              <h3 class="text-xl leading-6 font-medium text-neutral-900">
-                {#if is_fixed}
+                {$_("add-donation")}
-                  {$_("create-a-new-fixed-donation")}
-                {:else}{$_("create-a-new-distance-donation")}{/if}
               </h3>
-              <label class="content-center align-middle object-center">
+							<nav
-                <span class="ml-2 text-base" class:text-gray-300={is_fixed}
+								class="relative z-0 flex border border-neutral-200 rounded-xl overflow-hidden mb-2"
-                  >{$_("distance-donation")}</span
 							>
+								<button
+									on:click={() => {
+										type = "distance";
+									}}
+									type="button"
+									id="bar-with-underline-item-1"
+									class:donation_active_tab={type === "distance"}
+									class:donation_inactive_tab={type !== "distance"}
+									aria-selected={type === "distance"}
+									role="tab"
+								>
+									{$_("spende_pro_km")}
+								</button>
+								<button
+									on:click={() => {
+										type = "fixed";
+									}}
+									type="button"
+									id="bar-with-underline-item-2"
+									class:donation_active_tab={type === "fixed"}
+									class:donation_inactive_tab={type !== "fixed"}
+									aria-selected={type === "fixed"}
+									role="tab"
+								>
+									{$_("festbetrag")}
+								</button>
+								<button
+									on:click={() => {
+										type = "anonymous";
+									}}
+									type="button"
+									id="bar-with-underline-item-3"
+									class:donation_active_tab={type === "anonymous"}
+									class:donation_inactive_tab={type !== "anonymous"}
+									aria-selected={type === "anonymous"}
+									role="tab"
+								>
+									{$_("anonyme_spende")}
+								</button>
+							</nav>
+
+							<div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
+								{#if type === "anonymous"}
+									<div class="col-span-6">
+										<label
+											for="donation_amount_eur"
+											class="block text-sm font-medium text-neutral-900"
+										>
+											{$_("donation-amount")}</label
+										>
+										<div class="mt-1 flex rounded-md shadow-sm">
 											<input
-                  class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
+												autocomplete="off"
-                  type="checkbox"
+												class:border-red-500={!is_amount_valid}
-                  bind:checked={is_fixed}
+												class:focus:border-red-500={!is_amount_valid}
+												class:focus:ring-red-500={!is_amount_valid}
+												bind:value={amount_input}
+												type="number"
+												step="0.01"
+												name="donation_amount_eur"
+												class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+												placeholder="2.00"
 											/>
-                <span class="ml-2 text-base" class:text-gray-300={!is_fixed}
+											<span
-                  >{$_("fixed-donation")}</span
+												class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
+												>€</span
 											>
-              </label>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    "please-provide-the-nessecary-information-to-create-a-new-donation"
-                  )}
-                </p>
 										</div>
-              <div class="grid grid-cols-6 gap-6">
+										{#if !is_amount_valid}
+											<span
+												class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+											>
+												{$_("donation-amount-must-be-greater-that-0-00eur")}
+											</span>
+										{/if}
+									</div>
+								{:else}
 									<div class="col-span-6">
 										<label
 											for="donor"
-                    class="block text-sm font-medium text-gray-700"
+											class="block text-sm font-medium text-neutral-900"
 											>{$_("donor")}</label
 										>
 										<Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+											containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
 											itemFilter={(label, filterText, option) =>
 												filterDonors(label, filterText, option)}
 											items={donors}
@@ -204,15 +276,15 @@
 											on:clear={() => (donors = null)}
 										/>
 									</div>
-                {#if !is_fixed}
+									{#if type === "distance"}
 										<div class="col-span-6">
 											<label
 												for="donor"
-                      class="block text-sm font-medium text-gray-700"
+												class="block text-sm font-medium text-neutral-900"
 												>{$_("runner")}</label
 											>
 											<Select
-                      containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+												containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
 												itemFilter={(label, filterText, option) =>
 													filterDonors(label, filterText, option)}
 												items={runners}
@@ -228,11 +300,11 @@
 									<div class="col-span-6">
 										<label
 											for="donation_amount_eur"
-                    class="block text-sm font-medium text-gray-700"
+											class="block text-sm font-medium text-neutral-900"
 										>
-                    {#if !is_fixed}
+											{#if type === "fixed"}
-                      {$_("amount-per-kilometer")}
+												{$_("donation-amount")}
-                    {:else}{$_("donation-amount")}{/if}</label
+											{:else}{$_("amount-per-kilometer")}{/if}</label
 										>
 										<div class="mt-1 flex rounded-md shadow-sm">
 											<input
@@ -244,11 +316,11 @@
 												type="number"
 												step="0.01"
 												name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+												class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
 												placeholder="2.00"
 											/>
 											<span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+												class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
 												>€</span
 											>
 										</div>
@@ -260,42 +332,35 @@
 											</span>
 										{/if}
 									</div>
-                {#if is_fixed}
+								{/if}
-                  <div class="col-span-6">
+								{#if type === "fixed"}
+									<div class="flex">
+										<input
+											bind:checked={is_paid}
+											type="checkbox"
+											class="shrink-0 mt-0.5 border-neutral-200 rounded-sm text-blue-600 focus:ring-blue-500 checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+											id="hs-default-checkbox"
+										/>
 										<label
-                      for="paid"
+											for="hs-default-checkbox"
-                      class="block text-sm font-medium text-gray-700"
+											class="text-base text-neutral-900 ms-2 font-medium"
 											>{$_("already-paid")}</label
 										>
-                    <p class="text-gray-500">
-                      <input
-                        id="paid"
-                        bind:checked={is_paid}
-                        name="paid"
-                        type="checkbox"
-                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                      />
-                      <span class="align-text-bottom">
-                        {#if is_paid}
-                          {$_("paid")}
-                        {:else}
-                          {$_("open")}
-                        {/if}
-                      </span>
-                    </p>
 									</div>
 								{/if}
 							</div>
 						</div>
 					</div>
 				</div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div
+					class="bg-neutral-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"
+				>
 					<button
 						disabled={!createbtnenabled}
 						class:opacity-50={!createbtnenabled}
 						on:click={submit}
 						type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
 					>
 						{$_("create")}
 					</button>
@@ -304,7 +369,7 @@
 							modal_open = false;
 						}}
 						type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-neutral-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-neutral-900 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 					>
 						{$_("cancel")}
 					</button>
@@ -313,28 +378,3 @@
 		</div>
 	</div>
 {/if}
-
-<style>
-  .toggle:before {
-    content: "";
-    position: absolute;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 50%;
-    top: 0;
-    left: 0;
-    transform: scale(1.1);
-    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
-    background-color: white;
-    transition: 0.2s ease-in-out;
-  }
-
-  .toggle:checked {
-    /* @apply: bg-indigo-400; */
-    background-color: #7f9cf5;
-  }
-
-  .toggle:checked:before {
-    left: 1.25rem;
-  }
-</style>

src/components/donations/AddDonationPaymentModal.svelte

@@ -76,14 +76,14 @@
 
 {#if payment_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       payment_modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -96,18 +96,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -120,18 +120,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("enter-payment")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols gap-6">
+              <div class="grid grid-cols gap-2 lg:gap-6">
                 <div class="w-full">
                   <label
                     for="token"
@@ -179,13 +179,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("save-changes")}
           </button>
@@ -194,7 +194,7 @@
               payment_modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/donations/DeleteDonationModal.svelte

@@ -13,6 +13,7 @@
       firstname: "",
       lastname: "",
     },
+    amount: 0,
   };
   const dispatch = createEventDispatcher();
   onMount(() => {
@@ -37,14 +38,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -57,18 +58,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -80,29 +81,28 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
                 {$_("please-confirm-the-deletion-of-donation")}
-                </p>
+              </h3>
-              </div>
               <div class="w-full">
                 <span class="inline-block"
-                  ><b>{$_("donor")}</b>: {delete_donation.donor.firstname}
+                  >{#if delete_donation.donor}<b>{$_("donor")}</b>: {delete_donation.donor.firstname}
-                  {delete_donation.donor.lastname}</span
+                  {delete_donation.donor.lastname}{:else}{$_("anonymer_sponsor")}{/if}
+                  <br>
+                  <b>{$_("amount")}</b>: {`${(delete_donation.amount / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })}€`}</span
                 >
               </div>
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -111,7 +111,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/donations/DonationDetail.svelte

@@ -106,7 +106,7 @@
 	function deleteDonation() {
 		DonationService.donationControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("donation-deleted"));
+				toast.success($_("donation-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
@@ -193,7 +193,7 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
@@ -236,7 +236,7 @@
 				>{$_("donor")}</label
 			>
 			<Select
-				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					filterDonors(label, filterText, option)}
 				items={current_donors}
@@ -259,7 +259,7 @@
 					>{$_("runner")}</label
 				>
 				<Select
-					containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+					containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 					itemFilter={(label, filterText, option) =>
 						filterDonors(label, filterText, option)}
 					items={current_runners}

src/components/donations/DonationDonor.svelte

@@ -4,7 +4,10 @@
 </script>
 
 {#if !donor || donor.firstname == 0}
-  {$_("donor-has-no-associated-donations")}
+	<span
+		class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+		>{$_('anonymer_sponsor')}</span
+	>
 {:else}
 	<div class="flex items-center">
 		<a

src/components/donations/DonationTableAction.svelte

@@ -9,10 +9,15 @@
   export let paymentAction;
 </script>
 
+{#if paymentAction}
 <button
   on:click={paymentAction}
   class="text-[#025a21] hover:text-green-900 mr-4">{$_("enter-payment")}</button
 >
+{:else}
+<span class="inline-block opacity-0 cursor-default mr-4" style="">{$_("enter-payment")}</span>
+
+{/if}
 <TableActions
   bind:detailsAction
   bind:detailsLink

src/components/donations/DonationsOverview.svelte

@@ -112,18 +112,25 @@
       accessorKey: "actions",
       header: () => $_("action"),
       cell: (info) => {
+        let detailsLink
+        let paymentAction
+        if (info.row.original.donor != undefined){
+          detailsLink = `./${info.row.original.id}`
+          paymentAction = () => {
+            active_edits = current_donations.filter(
+              (r) => r.id == info.row.original.id
+            );
+          }
+        }
+        
         return renderComponent(DonationTableAction, {
-          detailsLink: `./${info.row.original.id}`,
+          detailsLink: detailsLink,
           deleteAction: () => {
             active_deletes = current_donations.filter(
               (r) => r.id == info.row.original.id
             );
           },
-          paymentAction: () => {
+          paymentAction: paymentAction,
-            active_edits = current_donations.filter(
-              (r) => r.id == info.row.original.id
-            );
-          },
           deleteEnabled:
             store.state.jwtinfo.userdetails.permissions.includes(
               "DONATION:DELETE"
@@ -163,7 +170,7 @@
       ...options,
       data: current_donations,
     }));
-    toast($_("donation-deleted"));
+    toast.success($_("donation-deleted"));
   }
 
   onMount(async () => {

src/components/donors/AddDonorModal.svelte

@@ -124,14 +124,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -144,18 +144,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -167,18 +167,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-donor")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-nessecary-information-to-add-a-new-donor"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -309,7 +309,7 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                   </div>
                   <div class="ml-3 text-sm">
@@ -418,13 +418,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -433,7 +433,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/donors/ConfirmDonorDeletion.svelte

@@ -1,9 +1,6 @@
 <script>
 	import { _ } from "svelte-i18n";
 	import { clickOutside } from "../base/outsideclick";
-
-  import { DonorService } from "@odit/lfk-client-js";
-
 	import { createEventDispatcher } from "svelte";
 	export let modal_open;
 	export let delete_donor;
@@ -19,12 +16,12 @@
 
 {#if modal_open}
 	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={cancelDelete}
 	>
 		<div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -37,18 +34,18 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+					<div class="">
 						<div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
-                class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -57,34 +54,32 @@
 								/></svg
 							>
 						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("attention")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
 								{$_(
 									"do-you-want-to-delete-this-donor-with-all-related-donations"
 								)}
-                  <br />
+							</h3>
+							<div class="mb-6">
+								<p class="text-sm text-gray-500">
 									{$_("all-associated-donations-will-get-deleted-as-well")}
 								</p>
 							</div>
 						</div>
 					</div>
 				</div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
 					<button
 						on:click={deleteDonor}
 						type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("confirm-delete-donor-with-all-donations")}
 					</button>
 					<button
 						on:click={cancelDelete}
 						type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 					>
 						{$_("cancel-keep-donor")}
 					</button>

src/components/donors/DonorDetail.svelte

@@ -77,7 +77,7 @@
 	function deleteDonor() {
 		DonorService.donorControllerRemove(original_data.id, true)
 			.then((resp) => {
-				toast($_("donor-deleted"));
+				toast.success($_("donor-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
@@ -153,7 +153,7 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
@@ -314,7 +314,7 @@
 					id="comments"
 					name="comments"
 					type="checkbox"
-					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 				/>
 			</div>
 			<div class="ml-3">

src/components/donors/Donors.svelte

@@ -18,7 +18,7 @@
         modal_open = true;
       }}
       type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("add-donor")}
     </button>
@@ -59,7 +59,7 @@
         hiddenElement.remove();
       }}
       type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("sponsoring-quittungs-liste_herunterladen")}
     </button>

src/components/donors/DonorsOverview.svelte

@@ -174,7 +174,7 @@
     toast.loading($_("deleting-donor"));
     await DonorService.donorControllerRemove(event.detail.id, true);
     toast.dismiss();
-    toast($_("donor-deleted"));
+    toast.success($_("donor-deleted"));
     current_donors = current_donors.filter((d) => d.id !== event.detail.id);
     active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
     options.update((options) => ({

src/components/general/About.svelte

@@ -24,7 +24,7 @@
 
 {#if modal_open}
 	<div
-		class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			modal_open = false;
@@ -44,19 +44,19 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
-							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
 								fill="currentColor"
-								class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
 								width="24"
@@ -71,16 +71,16 @@
 							<h3 class="text-lg leading-6 font-medium">
 								{$_("read-license")}
 							</h3>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">{currentlicense}</p>
 							</div>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">{licensetext}</p>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
 					<button
 						on:click={() => {
 							modal_open = false;
@@ -158,7 +158,7 @@
 				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
 			>
 				<span class="inline-block align-middle mr-8">
-					<b class="capitalize">{$_("general_promise_error")}</b>
+					<b>{$_("general_promise_error")}</b>
 					{error}
 				</span>
 			</div>

src/components/general/Footer.svelte

@@ -44,8 +44,12 @@
 			target="_blank">{$_("documentation")}</a
 		>
 		-
-    <a class="underline" href="/privacy">{$_("privacy")}</a>
+		<a class="underline" href="https://lauf-fuer-kaya.de/datenschutz/"
+			>{$_("privacy")}</a
+		>
 		-
-    <a class="underline" href="/imprint">{$_("imprint")}</a>
+		<a class="underline" href="https://lauf-fuer-kaya.de/impressum/"
+			>{$_("imprint")}</a
+		>
 	</p>
 </footer>

src/components/general/Imprint.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import { parse } from "marked";
-  import Footer from "./Footer.svelte";
-  // import * as css from "../base/simple.css";
-  let html = "";
-  async function load() {
-    let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
-    let text = (await md.text()).toString();
-    if (text.includes("<meta")) {
-      md.ok = false;
-    }
-    if (!md.ok) {
-      md = await fetch("/imprint_en.md");
-      text = await md.text();
-    }
-    html = parse(text);
-  }
-  const promise = load();
-</script>
-
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
-  <div class="text-center mb-8">
-    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-    >
-      {$_("imprint")}
-    </h1>
-  </div>
-</div>
-
-<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
-  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    {#await promise}
-      <p class="text-center w-full">{$_("imprint-loading")}</p>
-    {:then}
-      <div class="simplecontent">
-        {@html html}
-      </div>
-    {:catch error}
-      <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
-      >
-        <span class="inline-block align-middle mr-8">
-          <b class="capitalize">{$_("general_promise_error")}</b>
-          {error}
-        </span>
-      </div>
-    {/await}
-  </div>
-</div>
-<Footer />

src/components/general/Privacy.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import { parse } from "marked";
-  import Footer from "./Footer.svelte";
-  // import * as css from "../base/simple.css?inline";
-  let html = "";
-  async function load() {
-    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
-    let text = (await md.text()).toString();
-    if (text.includes("<meta")) {
-      md.ok = false;
-    }
-    if (!md.ok) {
-      md = await fetch("/privacy_en.md");
-      text = await md.text();
-    }
-    html = parse(text);
-  }
-  const promise = load();
-</script>
-
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
-  <div class="text-center mb-8">
-    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-    >
-      {$_("privacy")}
-    </h1>
-  </div>
-</div>
-
-<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
-  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    {#await promise}
-      <p class="text-center w-full">{$_("privacy-loading")}</p>
-    {:then}
-      <div class="simplecontent">
-        {@html html}
-      </div>
-    {:catch error}
-      <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
-      >
-        <span class="inline-block align-middle mr-8">
-          <b class="capitalize">{$_("general_promise_error")}</b>
-          {error}
-        </span>
-      </div>
-    {/await}
-  </div>
-</div>
-<Footer />

src/components/general/Sidebar.svelte

@@ -1,103 +0,0 @@
-<script>
-  let open = false;
-</script>
-
-<div class="md:flex flex-col md:flex-row h-screen w-full">
-  <div
-    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0"
-  >
-    <div
-      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between"
-    >
-      <a
-        href="/#/test"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
-        >Sidebar</a
-      >
-      <button
-        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
-      >
-        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
-          {#if open}
-            <path
-              fill-rule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            />
-          {/if}
-          {#if !open}
-            <path
-              fill-rule="evenodd"
-              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-              clip-rule="evenodd"
-            />
-          {/if}
-        </svg>
-      </button>
-    </div>
-    <nav
-      :class:block={open}
-      :class:hidden={!open}
-      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto"
-    >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Blog</a
-      >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Portfolio</a
-      >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">About</a
-      >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Contact</a
-      >
-      <div class="relative">
-        <button
-          on:click={() => {
-            open = !open;
-          }}
-          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        >
-          <span>Dropdown</span>
-          <svg
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
-            ><path
-              fill-rule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            /></svg
-          >
-        </button>
-        <div
-          class:block={open}
-          class:hidden={!open}
-          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg"
-        >
-          <div
-            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800"
-          >
-            <a
-              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #1</a
-            >
-            <a
-              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #2</a
-            >
-            <a
-              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #3</a
-            >
-          </div>
-        </div>
-      </div>
-    </nav>
-  </div>
-</div>

src/components/groups/AddGroupModal.svelte

@@ -59,14 +59,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -79,20 +79,20 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 640 512"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -102,18 +102,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-user-group")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-for-creating-a-new-user-group"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -159,13 +159,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -174,7 +174,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/groups/GroupDetail.svelte

@@ -146,7 +146,7 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}

src/components/groups/GroupPermissions.svelte

@@ -50,7 +50,7 @@
         );
       });
       grantedPermissions_initial = grantedPermissions;
-      toast($_("permissions-updated"));
+      toast.success($_("permissions-updated"));
     });
   }
   Object.values(CreatePermission.target).forEach((t) => {
@@ -141,7 +141,7 @@
             class:opacity-50={save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
             >{$_("save-changes")}</button
           >
         {:else}

src/components/groups/UserGroupsOverview.svelte

@@ -140,7 +140,7 @@
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
+        <b>{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

src/components/orgs/AddOrgModal.svelte

@@ -25,7 +25,7 @@
   $: address_input2_value = "";
   $: address_zipcode_value = "";
   $: address_city_value = "";
-  $: address_checked = true;
+  $: address_checked = false;
 
   let address_input1;
   let address_input2;
@@ -82,14 +82,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -102,18 +102,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -124,18 +124,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-organization")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-organization"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -170,7 +170,7 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                   </div>
                   <div class="ml-3 text-sm">
@@ -222,7 +222,7 @@
                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
-                  <div class="col-span-6">
+                  <div class="col-span-2">
                     <label
                       for="zipcode"
                       class="block text-sm font-medium text-gray-700"
@@ -248,7 +248,7 @@
                       </span>
                     {/if}
                   </div>
-                  <div class="col-span-6">
+                  <div class="col-span-4">
                     <label
                       for="city"
                       class="block text-sm font-medium text-gray-700"
@@ -279,13 +279,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -294,7 +294,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/orgs/ConfirmOrgDeletion.svelte

@@ -1,108 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-
-  import { createEventDispatcher } from "svelte";
-  export let modal_open;
-  export let delete_org;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    dispatch("cancelDelete", { id: delete_org.id });
-  }
-  function deleteOrg() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
-      delete_org.id,
-      true
-    )
-      .then((resp) => {
-        toast($_("organization-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:clickOutside
-    on:click_outside={cancelDelete}
-  >
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
-    >
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
-        />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
-      >
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline"
-      >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-            >
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("attention")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    "do-you-want-to-delete-the-organization-delete_org-name",
-                    {
-                      values: { orgname: delete_org.name },
-                    }
-                  )}<br />
-                  {$_("all-associated-teams-and-runners-will-be-deleted-too")}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={deleteOrg}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-          >
-            {$_("confirm-delete-organization-and-associated-teams-runners")}
-          </button>
-          <button
-            on:click={cancelDelete}
-            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-          >
-            {$_("cancel-keep-organization")}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/orgs/ConfirmOrgDeletionModal.svelte

@@ -0,0 +1,104 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
+
+	import { createEventDispatcher } from "svelte";
+	export let modal_open;
+	export let delete_org;
+	const dispatch = createEventDispatcher();
+	function cancelDelete() {
+		modal_open = false;
+		dispatch("cancelDelete", { id: delete_org.id });
+	}
+	function deleteOrg() {
+		RunnerOrganizationService.runnerOrganizationControllerRemove(
+			delete_org.id,
+			true
+		)
+			.then((resp) => {
+				toast.success($_("organization-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-hidden"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+						>
+							<svg
+								class="size-6 text-blue-600"
+								fill="currentColor"
+								width="24"
+								height="24"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								><path
+									fill="currentColor"
+									d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+								/></svg
+							>
+						</div>
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
+								{$_("do-you-want-to-delete-the-organization-delete_org-name", {
+									values: { orgname: delete_org.name },
+								})}
+							</h3>
+							<div class="mb-6">
+								<p class="text-sm text-gray-500">
+									{$_("all-associated-teams-and-runners-will-be-deleted-too")}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
+					<button
+						on:click={deleteOrg}
+						type="button"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+					>
+						{$_("confirm-delete-organization-and-associated-teams-runners")}
+					</button>
+					<button
+						on:click={cancelDelete}
+						type="button"
+						class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
+					>
+						{$_("cancel-keep-organization")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/orgs/OrgDetail.svelte

@@ -13,8 +13,7 @@
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
 	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
-	$: delete_triggered = false;
 	$: address_valid_or_none =
 		(isAddress1Valid && iszipcodevalid && iscityvalid) ||
 		editable.address_checked === false;
@@ -76,13 +75,10 @@
 			false
 		)
 			.then((resp) => {
-				toast($_("organization-deleted"));
+				toast.success($_("organization-deleted"));
 				location.replace("./");
 			})
-			.catch((err) => {
+			.catch((err) => {});
-				modal_open = true;
-				delete_org = original_object;
-			});
 	}
 	function submit() {
 		if (data_loaded === true && save_enabled) {
@@ -142,7 +138,7 @@
 	opened_from="OrgDetail"
 	bind:import_modal_open
 />
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+<ConfirmOrgDeletionModal bind:modal_open bind:delete_org />
 {#if data_loaded}
 	<section class="container p-5">
 		<div class="flex flex-row mb-4">
@@ -173,7 +169,7 @@
 		</div>
 		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{original_object.name} [#{params.orgid}]
-			<span data-id="org_actions_${editable.id}">
+			<div data-id="org_actions_${editable.id}">
 				<GenerateSponsoringContracts
 					bind:sponsoring_contracts_show
 					bind:generate_orgs
@@ -192,42 +188,25 @@
 					</button>
 				{/if}
 				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-					{#if delete_triggered}
-						<button
-							on:click={deleteOrganization}
-							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-							>{$_("confirm-delete")}</button
-						>
 					<button
 						on:click={() => {
-								delete_triggered = !delete_triggered;
+							modal_open = true;
-							}}
+							delete_org = original_object;
-							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-							>{$_("cancel")}</button
-						>
-					{/if}
-					{#if !delete_triggered}
-						<button
-							on:click={() => {
-								delete_triggered = true;
 						}}
 						type="button"
 						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
 						>{$_("delete-organization")}</button
 					>
 				{/if}
-				{/if}
-				{#if !delete_triggered}
 				<button
 					on:click={submit}
 					disabled={!save_enabled}
 					class:opacity-50={!save_enabled}
 					type="button"
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+					class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 					>{$_("save-changes")}</button
 				>
-				{/if}
+			</div>
-			</span>
 		</div>
 		<div class="text-sm w-full mt-2">
 			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
@@ -245,7 +224,7 @@
 				>{$_("contact")}</label
 			>
 			<Select
-				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					label.toLowerCase().includes(filterText.toLowerCase()) ||
 					option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -267,7 +246,7 @@
 						id="toggle_selfservice_feature"
 						name="toggle_selfservice_feature"
 						type="checkbox"
-						class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+						class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 					/>
 				</div>
 				<div class="ml-3 text-sm">
@@ -284,7 +263,7 @@
 						<button on:click={copy} class="inline-flex w-full">
 							<p
 								name="token"
-								class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+								class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2 break-all font-mono text-left"
 							>
 								{#if editable.registrationKey}
 									{registrationLink}
@@ -293,7 +272,7 @@
 								{/if}
 							</p>
 							<div
-								class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
+								class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 cursor-pointer flex items-center justify-center"
 							>
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -324,7 +303,7 @@
 								id="toggle_address_checkbox"
 								name="toggle_address_checkbox"
 								type="checkbox"
-								class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+								class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 							/>
 						</div>
 						<div class="ml-3 text-sm">

src/components/orgs/OrgOverview.svelte

@@ -1,244 +0,0 @@
-<script>
-	import { _ } from "svelte-i18n";
-	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-	let modal_open = false;
-	let delete_org = {};
-	import { RunnerOrganizationService } from "@odit/lfk-client-js";
-	import store from "../../store";
-	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-	import toast from "svelte-french-toast";
-	$: searchvalue = "";
-	$: active_deletes = [];
-	$: sponsoring_contracts_show = current_organizations.some(
-		(r) => r.is_selected === true
-	);
-	$: cards_show = current_organizations.some((r) => r.is_selected === true);
-	$: generate_orgs = current_organizations.filter(
-		(r) => r.is_selected === true
-	);
-	$: certificates_show = current_organizations.some(
-		(r) => r.is_selected === true
-	);
-	export let current_organizations = [];
-
-	const promise =
-		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-			(val) => {
-				current_organizations = val;
-			}
-		);
-</script>
-
-<ConfirmOrgDeletion
-	on:cancelDelete={(event) => {
-		modal_open = false;
-		active_deletes[event.detail.id] = false;
-	}}
-	bind:modal_open
-	bind:delete_org
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-	{#await promise}
-		<div
-			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-			role="alert"
-		>
-			<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
-			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
-		</div>
-	{:then}
-		{#if current_organizations.length === 0}
-			<OrgsEmptyState />
-		{:else}
-			<input
-				type="search"
-				bind:value={searchvalue}
-				placeholder={$_("datatable.search")}
-				aria-label={$_("datatable.search")}
-				class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-			/>
-			<div class="h-12">
-				<GenerateSponsoringContracts
-					bind:sponsoring_contracts_show
-					bind:generate_orgs
-				/>
-				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
-				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-			</div>
-			<div
-				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-			>
-				<table class="divide-y divide-gray-200 w-full">
-					<thead class="bg-gray-50">
-						<tr class="odd:bg-white even:bg-gray-100">
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								<button
-									on:click={() => {
-										const newstate = !current_organizations.some(
-											(r) => r.is_selected === true
-										);
-										current_organizations = current_organizations.map((r) => {
-											r.is_selected = newstate;
-											return r;
-										});
-									}}
-									class="underline cursor-pointer select-none"
-									>{#if current_organizations.some((r) => r.is_selected === true)}
-										{$_("deselect-all")}
-									{:else}{$_("select-all")}{/if}
-								</button>
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("name")}
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("address")}
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("contact")}
-							</th>
-							<th scope="col" class="relative px-6 py-3">
-								<span class="sr-only">{$_("action")}</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody class="divide-y divide-gray-200">
-						{#each current_organizations as o}
-							{#if Object.values(o)
-								.toString()
-								.toLowerCase()
-								.includes(searchvalue)}
-								<tr
-									class="odd:bg-white even:bg-gray-100"
-									data-rowid="org_{o.id}"
-								>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<input
-											bind:checked={o.is_selected}
-											type="checkbox"
-											class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-										/>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{o.name}
-											</div>
-										</div>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{#if o.address.address1 !== null}
-													{o.address.address1}<br />
-													<!-- {o.address.address2 || ''}<br /> -->
-													{o.address.postalcode}
-													{o.address.city}
-													{o.address.country}
-												{/if}
-											</div>
-										</div>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{#if o.contact}
-													<a
-														href="../contacts/{o.contact.id}"
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
-														>{o.contact.firstname}
-														{o.contact.middlename || ""}
-														{o.contact.lastname}</a
-													>
-												{:else}{$_("no-contact-specified")}{/if}
-											</div>
-										</div>
-									</td>
-									{#if active_deletes[o.id] === true}
-										<td
-											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-										>
-											<button
-												on:click={() => {
-													active_deletes[o.id] = false;
-												}}
-												tabindex="0"
-												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-												>{$_("cancel-delete")}</button
-											>
-											<button
-												on:click={() => {
-													toast.loading($_("deleting-organization"));
-													RunnerOrganizationService.runnerOrganizationControllerRemove(
-														o.id,
-														false
-													)
-														.then((resp) => {
-															current_organizations =
-																current_organizations.filter(
-																	(obj) => obj.id !== o.id
-																);
-															toast($_("organization-deleted"));
-														})
-														.catch((err) => {
-															modal_open = true;
-															delete_org = o;
-														});
-												}}
-												tabindex="0"
-												class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-												>{$_("confirm-delete")}</button
-											>
-										</td>
-									{:else}
-										<td
-											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-										>
-											<a
-												href="./{o.id}"
-												class="text-indigo-600 hover:text-indigo-900"
-												>{$_("details")}</a
-											>
-											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
-												<button
-													on:click={() => {
-														active_deletes[o.id] = true;
-													}}
-													tabindex="0"
-													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-													>{$_("delete")}</button
-												>
-											{/if}
-										</td>
-									{/if}
-								</tr>
-							{/if}
-						{/each}
-					</tbody>
-				</table>
-			</div>
-		{/if}
-	{:catch error}
-		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-			<span class="inline-block align-middle mr-8">
-				<b class="capitalize">{$_("general_promise_error")}</b>
-				{error}
-			</span>
-		</div>
-	{/await}
-{/if}

src/components/orgs/Orgs.svelte

@@ -1,12 +1,39 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	let delete_org = {};
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
 	import store from "../../store";
-  import AddOrgModal from "./AddOrgModal.svelte";
+	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  export let modal_open = false;
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
-  import OrgOverview from "./OrgOverview.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_organizations.some((r) => r.is_selected === true);
+	$: generate_orgs = current_organizations.filter(
+		(r) => r.is_selected === true
+	);
+	$: certificates_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
 	let current_organizations = [];
-  export let import_modal_open = false;
+
+	const promise =
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				current_organizations = val;
+			}
+		);
+	import { _ } from "svelte-i18n";
+	import AddOrgModal from "./AddOrgModal.svelte";
+	let delete_modal_open = false;
+	let modal_open = false;
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	let import_modal_open = false;
 </script>
 
 <section class="container p-5">
@@ -19,7 +46,7 @@
 				modal_open = true;
 			}}
 			type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+			class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 		>
 			{$_("create-organization")}
 		</button>
@@ -30,12 +57,185 @@
 				import_modal_open = true;
 			}}
 			type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+			class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 		>
 			{$_("import-runners")}
 		</button>
 	{/if}
-  <OrgOverview bind:current_organizations />
+	<ConfirmOrgDeletionModal
+		on:cancelDelete={(event) => {
+			delete_modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open={delete_modal_open}
+		bind:delete_org
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+		{#await promise}
+			<div
+				class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+				role="alert"
+			>
+				<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:then}
+			{#if current_organizations.length === 0}
+				<OrgsEmptyState />
+			{:else}
+				<input
+					type="search"
+					bind:value={searchvalue}
+					placeholder={$_("datatable.search")}
+					aria-label={$_("datatable.search")}
+					class="w-full sm:w-auto sm:mt-0 p-2 rounded-md border mb-1 lg:mb-0"
+				/>
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+				<div
+					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+				>
+					<table class="divide-y divide-gray-200 w-full">
+						<thead class="bg-gray-50">
+							<tr class="odd:bg-white even:bg-gray-100">
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									<button
+										on:click={() => {
+											const newstate = !current_organizations.some(
+												(r) => r.is_selected === true
+											);
+											current_organizations = current_organizations.map((r) => {
+												r.is_selected = newstate;
+												return r;
+											});
+										}}
+										class="underline cursor-pointer select-none"
+										>{#if current_organizations.some((r) => r.is_selected === true)}
+											{$_("deselect-all")}
+										{:else}{$_("select-all")}{/if}
+									</button>
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("name")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("address")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("contact")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_organizations as o}
+								{#if Object.values(o)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<tr
+										class="odd:bg-white even:bg-gray-100"
+										data-rowid="org_{o.id}"
+									>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<input
+												bind:checked={o.is_selected}
+												type="checkbox"
+												class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
+											/>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{o.name}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.address.address1 !== null}
+														{o.address.address1}<br />
+														<!-- {o.address.address2 || ''}<br /> -->
+														{o.address.postalcode}
+														{o.address.city}
+														{o.address.country}
+													{/if}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.contact}
+														<a
+															href="../contacts/{o.contact.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{o.contact.firstname}
+															{o.contact.middlename || ""}
+															{o.contact.lastname}</a
+														>
+													{:else}{$_("no-contact-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<a
+												href="./{o.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
+											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
+												<button
+													on:click={() => {
+														active_deletes[o.id] = true;
+														delete_modal_open = true;
+														delete_org = o;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									</tr>
+								{/if}
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		{:catch error}
+			<div
+				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
+			>
+				<span class="inline-block align-middle mr-8">
+					<b>{$_("general_promise_error")}</b>
+					{error}
+				</span>
+			</div>
+		{/await}
+	{/if}
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}

src/components/pdf_generation/DocumentServer.ts

@@ -100,6 +100,7 @@ class DocumentServer {
         first_name: runners[i].firstname,
         middle_name: runners[i].middlename,
         last_name: runners[i].lastname,
+        self_service_link: runners[i].selfserviceLink,
         group: {
           id: runners[i].group.id,
           name: runners[i].group.name,

src/components/pdf_generation/DownloadProgressModal.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+	import { onMount } from "svelte";
+	export let download_details = "";
+	export let modal_open;
+	onMount(() => {
+		document.onkeydown = (e) => {
+			e = e || window.event;
+			if (e.key === "Escape") {
+				modal_open = false;
+			}
+			if (e.keyCode === 13) {
+				if (createbtnenabled === true) {
+					createbtnenabled = false;
+					submit();
+				}
+			}
+		};
+	});
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-hidden"
+		use:clickOutside
+		on:click_outside={() => {
+			modal_open = false;
+		}}
+	>
+		<div
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								class="size-6 text-blue-600"
+								fill="currentColor"
+								width="24"
+								height="24"
+								><path fill="none" d="M0 0h24v24H0z" />
+								<path
+									d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+								/></svg
+							>
+						</div>
+						<div class="mt-3 sm:text-left text-base">
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
+								{$_('download_laeuft')}
+							</h3>
+							<div class="w-full">
+								{download_details}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -30,12 +30,16 @@
     a.click();
     a.remove();
     toast.dismiss();
-		toast($_("pdf-successfully-generated"));
+    toast.success($_("pdf-successfully-generated"));
   }
 
-	function generateRunnerCards(locale) {
+  function generateRunnerCards(locale, useCombined = false) {
     if (generate_orgs.length > 0) {
-			generateOrgCards(locale);
+		if(useCombined){
+			generateOrgCardsCombined(locale);
+		} else {
+			generateOrgCards(locale)
+		}
     } else if (generate_teams.length > 0) {
       generateTeamCards(locale);
     } else if (generate_runners.length > 0) {
@@ -125,7 +129,7 @@
       let runners =
         await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
           o.id,
-					false
+          true
         );
       let cards = [];
       for (let runner of runners) {
@@ -175,28 +179,78 @@
       }
     }
   }
+  async function generateOrgCardsCombined(locale) {
+    toast.loading($_("generating-pdfs"));
+    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+    let count = 0;
+    let count_orgs = 0;
+    for (const o of generate_orgs) {
+      count_orgs++;
+      let cards = [];
+      let count = 0;
+      let runners =
+        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+          o.id,
+          true
+        );
+      for (let runner of runners) {
+        let card = current_cards.find((c) => c.runner?.id == runner.id);
+        if (!card) {
+          card = await RunnerCardService.runnerCardControllerPost({
+            runner: runner.id,
+          });
+        }
+        cards.push(card);
+      }
+      for (const t of o.teams) {
+        count++;
+        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+          t.id
+        );
+        for (let runner of runners) {
+          let card = current_cards.find((c) => c.runner?.id == runner.id);
+          if (!card) {
+            card = await RunnerCardService.runnerCardControllerPost({
+              runner: runner.id,
+            });
+          }
+          cards.push(card);
+        }
+      }
+      await documentServer
+        .generateCards(cards, locale)
+        .then((blob) => {
+          download(
+            blob,
+            `${$_("runnercards")}_${o.name}-${locale}-${createId()}.pdf`
+          );
+        })
+        .catch((err) => {});
+    }
+  }
 </script>
 
 {#if cards_show}
-	<div>
-		<p class="text-base">{$_("generate-runnercards")}</p>
-		<div class="inline-flex rounded-lg shadow-2xs">
   <button
     on:click={() => {
       generateRunnerCards("de");
     }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+    on:contextmenu|preventDefault={() => {
+      generateRunnerCards("de", true);
+    }}
+    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
   >
-				DE
+    {$_("generate-runnercards")}: DE
   </button>
   <button
     on:click={() => {
       generateRunnerCards("en");
     }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+	on:contextmenu|preventDefault={() => {
+      generateRunnerCards("en", true);
+    }}
+    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
   >
-				EN
+    {$_("generate-runnercards")}: EN
   </button>
-		</div>
-	</div>
 {/if}

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -4,6 +4,7 @@
     DonationService,
     RunnerTeamService,
     RunnerOrganizationService,
+	RunnerService
   } from "@odit/lfk-client-js";
   import { init } from "@paralleldrive/cuid2";
   import toast from "svelte-french-toast";
@@ -37,7 +38,7 @@
     a.click();
     a.remove();
     toast.dismiss();
-		toast($_("pdf-successfully-generated"));
+    toast.success($_("pdf-successfully-generated"));
   }
 
   async function generateRunnerCertificates(locale) {
@@ -46,9 +47,10 @@
       (await DonationService.donationControllerGetAll()) || [];
     let certificateRunners = [];
     for (let runner of generate_runners) {
-			runner.distanceDonations =
+	  const linkRunner = await RunnerService.runnerControllerGetOne(runner.id)
+      linkRunner.distanceDonations =
         current_donations.filter((d) => d.runner?.id == runner.id) || [];
-			certificateRunners.push(runner);
+      certificateRunners.push(linkRunner);
     }
     documentServer
       .generateCertificates(certificateRunners, locale)
@@ -71,7 +73,8 @@
       (await DonationService.donationControllerGetAll()) || [];
     for (const t of generate_teams) {
       const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-				t.id
+        t.id,
+        true
       );
       let certificateRunners = [];
       for (let runner of runners) {
@@ -104,7 +107,8 @@
       let runners =
         await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
           o.id,
-					false
+          true,
+		  true
         );
       let certificateRunners = [];
       for (let runner of runners) {
@@ -124,7 +128,8 @@
       for (const t of o.teams) {
         count++;
         let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-					t.id
+          t.id,
+		  true
         );
         let certificateRunners = [];
         for (let runner of runners) {
@@ -146,7 +151,7 @@
               count_orgs === generate_orgs.length
             ) {
               toast.dismiss();
-							toast($_("pdfs-successfully-generated"));
+              toast.success($_("pdfs-successfully-generated"));
             }
           })
           .catch((err) => {});
@@ -156,25 +161,20 @@
 </script>
 
 {#if certificates_show}
-	<div>
-		<p class="text-base">{$_("generate-runner-certificates")}</p>
-		<div class="inline-flex rounded-lg shadow-2xs">
   <button
     on:click={() => {
       generateCertificates("de");
     }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
   >
-				DE
+    {$_("generate-runner-certificates")}: DE
   </button>
   <button
     on:click={() => {
       generateCertificates("en");
     }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
   >
-				EN
+    {$_("generate-runner-certificates")}: EN
   </button>
-		</div>
-	</div>
 {/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -7,6 +7,7 @@
 	import DocumentServer from "./DocumentServer";
 	import { init } from "@paralleldrive/cuid2";
 	import toast from "svelte-french-toast";
+	import DownloadProgressModal from "./DownloadProgressModal.svelte";
 	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
 	const documentServer = new DocumentServer(
 		config.baseurl_documentserver,
@@ -17,8 +18,12 @@
 	export let generate_runners = [];
 	export let generate_orgs = [];
 	export let generate_teams = [];
+	//
+	export let download_modal_open = false;
+	export let download_details = "";
 
 	function generateSponsoringContract(locale) {
+		download_modal_open = true;
 		if (generate_orgs.length > 0) {
 			generateOrgContracts(locale);
 		} else if (generate_teams.length > 0) {
@@ -36,24 +41,29 @@
 		a.click();
 		a.remove();
 		toast.dismiss();
-		toast($_("pdf-successfully-generated"));
+		toast.success($_("pdf-successfully-generated"));
 	}
 
 	async function generateTeamContracts(locale) {
 		toast.loading($_("generating-pdfs"));
+		let totalCount = generate_teams.length;
 		let count = 0;
 		for (const t of generate_teams) {
 			count++;
+			download_details = `${t.parentGroup.name} > ${t.name}`;
 			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
 				t.id
 			);
-			documentServer
+			await documentServer
 				.generateContracts(runners, locale)
 				.then((blob) => {
 					download(
 						blob,
 						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
 					);
+					if (count === totalCount) {
+						download_modal_open = false;
+					}
 				})
 				.catch((err) => {});
 		}
@@ -61,15 +71,23 @@
 
 	async function generateOrgContracts(locale) {
 		toast.loading($_("generating-pdf"));
-		let count_orgs = 0;
+		let totalCount = 0;
 		for (const o of generate_orgs) {
-			count_orgs++;
+			totalCount++;
+			for (const t of o.teams) {
+				totalCount++;
+			}
+		}
+		console.log({ totalCount });
 		let count = 0;
+		for (const o of generate_orgs) {
+			count++;
 			let runners =
 				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
 					o.id,
-					false
+					true
 				);
+			download_details = o.name;
 			await documentServer
 				.generateContracts(runners, locale)
 				.then((blob) => {
@@ -84,6 +102,7 @@
 				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
 					t.id
 				);
+				download_details = `${o.name} > ${t.name}`;
 				await documentServer
 					.generateContracts(runners, locale)
 					.then((blob) => {
@@ -93,15 +112,19 @@
 								t.name
 							}-${locale}-${createId()}.pdf`
 						);
+						console.log({ count });
+						if (count === totalCount) {
+							download_modal_open = false;
+						}
 					})
 					.catch((err) => {});
 			}
 		}
 	}
 
-	function generateRunnerContracts(locale) {
+	async function generateRunnerContracts(locale) {
 		toast.loading($_("generating-pdf"));
-		documentServer
+		await documentServer
 			.generateContracts(generate_runners, locale)
 			.then((blob) => {
 				let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
@@ -111,6 +134,7 @@
 					}-${locale}-${createId()}.pdf`;
 				}
 				download(blob, fileName);
+				download_modal_open = false;
 			})
 			.catch((err) => {
 				console.error(err);
@@ -119,25 +143,21 @@
 </script>
 
 {#if sponsoring_contracts_show}
-	<div>
+	<DownloadProgressModal {download_details} modal_open={download_modal_open} />
-		<p class="text-base">{$_("generate-sponsoring-contracts")}</p>
-		<div class="inline-flex rounded-lg shadow-2xs">
 	<button
 		on:click={() => {
 			generateSponsoringContract("de");
 		}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 	>
-				DE
+		{$_("generate-sponsoring-contracts")}: DE
 	</button>
 	<button
 		on:click={() => {
 			generateSponsoringContract("en");
 		}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 	>
-				EN
+		{$_("generate-sponsoring-contracts")}: EN
 	</button>
-		</div>
-	</div>
 {/if}

src/components/presets/Avatars.svelte

@@ -1,92 +0,0 @@
-<h3 class="text-lg">Standard Avatars</h3>
-<div class="relative rounded-full w-4 h-4">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-8 h-8">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-12 h-12">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-16 h-16">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-20 h-20">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-24 h-24">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<h3 class="text-lg">Status Avatars</h3>
-<div class="relative rounded-full w-4 h-4">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
-</div>
-<div class="relative rounded-full w-8 h-8">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
-</div>
-<div class="relative rounded-full w-12 h-12">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
-</div>
-<div class="relative rounded-full w-16 h-16">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
-</div>
-<div class="relative rounded-full w-20 h-20">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
-</div>
-<div class="relative rounded-full w-24 h-24">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
-</div>

src/components/presets/Badges.svelte

@@ -1,65 +0,0 @@
-<h3 class="text-lg">badges</h3>
-<span
-  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
-  >Paid</span
->
-<span
-  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
-  >Overdue</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600"
-  >Primary</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600"
-  >Secondary</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
-  >Success</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600"
-  >Danger</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400"
-  >Warning</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300"
-  >Info</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200"
-  >Light</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900"
-  >Dark</span
->
-<h3 class="text-lg">closable badges</h3>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
-  Primary
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
-  Secondary
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
-  Success
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
-  Danger
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
-  Warning
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
-  Info
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
-  Light<span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
-  Dark
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>

src/components/presets/BreadcrumbNav.svelte

@@ -1,59 +0,0 @@
-<div class="flex flex-row mb-4">
-  <div class="w-full">
-    <nav class="w-full flex">
-      <ol class="list-none flex flex-row items-center justify-start">
-        <li class="mr-2 flex items-center">
-          <svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-3 w-3 stroke-current"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-            <polyline points="9 22 9 12 15 12 15 22" /></svg
-          >
-        </li>
-        <li class="flex items-center">
-          <a class="mr-2" href="/">Home</a><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-3 w-3 mr-2 stroke-current"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><line x1="5" y1="12" x2="19" y2="12" />
-            <polyline points="12 5 19 12 12 19" /></svg
-          >
-        </li>
-        <li class="flex items-center">
-          <a class="mr-2" href="/">Second level</a><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-3 w-3 mr-2 stroke-current"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><line x1="5" y1="12" x2="19" y2="12" />
-            <polyline points="12 5 19 12 12 19" /></svg
-          >
-        </li>
-        <li class="flex items-center">
-          <a class="mr-2" href="/">Third level</a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</div>

src/components/presets/ComponentDump.svelte

@@ -1,80 +0,0 @@
-<script>
-  import Avatars from "./Avatars.svelte";
-  import Badges from "./Badges.svelte";
-  import BreadcrumbNav from "./BreadcrumbNav.svelte";
-  import FileUpload from "./FileUpload.svelte";
-  import Pagination from "./Pagination.svelte";
-  import Table from "./Table.svelte";
-  import Tabs from "./Tabs.svelte";
-  import Tags from "./Tags.svelte";
-</script>
-
-<div class="border-4 border-dashed rounded h-96 mb-4" />
-<div class="mb-8">
-  <FileUpload />
-</div>
-<div class="mb-8">
-  <Tabs />
-</div>
-<div class="mb-8">
-  <Tags />
-</div>
-<div class="mb-8">
-  <Badges />
-</div>
-<div class="mb-8">
-  <Avatars />
-</div>
-<Pagination />
-<div class="mb-8">
-  <Table />
-</div>
-<div class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
-  <div class="flex flex-row items-center justify-between mb-6">
-    <div class="flex flex-col">
-      <div class="text-sm font-light text-grey-500">Regular</div>
-      <div class="text-sm font-bold"><span>Text inputs</span></div>
-    </div>
-  </div>
-  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
-    <div class="w-full lg:w-1/4">
-      <div class="form-element">
-        <div class="form-label">Label</div>
-        <input
-          name="name"
-          type="text"
-          class="form-input"
-          placeholder="Enter something..."
-        />
-        <div class="form-hint">This is a hint</div>
-      </div>
-    </div>
-    <div class="w-full lg:w-1/4">
-      <div class="form-element">
-        <div class="form-label">First name</div>
-        <input
-          name="name"
-          type="text"
-          class="form-input form-input-invalid"
-          placeholder="john@example.com"
-        />
-        <div class="form-error">First name is required</div>
-      </div>
-    </div>
-    <div class="w-full lg:w-1/4">
-      <div class="form-element">
-        <div class="form-label">First name</div>
-        <input
-          name="name"
-          type="text"
-          class="form-input form-input-valid"
-          placeholder="john@example.com"
-        />
-        <div class="form-success">First name is valid</div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="mb-8">
-  <BreadcrumbNav />
-</div>

src/components/presets/ConversionsChart.svelte

@@ -1,643 +0,0 @@
-<div class="w-full p-4 rounded-lg bg-white border border-grey-100">
-  <div class="flex flex-row items-center justify-between mb-6">
-    <div class="flex flex-col">
-      <div class="text-sm font-light text-grey-500">Conversions</div>
-      <div class="text-sm font-bold"><span>This year</span></div>
-    </div>
-    <div class="relative">
-      <button
-        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"
-        ><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="stroke-current stroke-1"
-          size="18"
-          height="18"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="12" cy="12" r="1" />
-          <circle cx="12" cy="5" r="1" />
-          <circle cx="12" cy="19" r="1" />
-        </svg></button
-      >
-      <div class="dropdown absolute top-0 right-0 mt-8">
-        <div class="dropdown-content w-48 bottom-start">
-          <div class="flex flex-col w-full">
-            <ul class="list-none">
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">Today</a
-                >
-              </li>
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This week</a
-                >
-              </li>
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This month</a
-                >
-              </li>
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This year</a
-                >
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="flex flex-row w-full">
-    <div style="width:100%;height:240px">
-      <div class="recharts-responsive-container" style="width:100%;height:100%">
-        <div
-          class="recharts-wrapper"
-          style="position: relative; cursor: default; width: 704px; height: 240px;"
-        >
-          <svg
-            class="recharts-surface"
-            width="704"
-            height="240"
-            viewBox="0 0 704 240"
-            version="1.1"
-          >
-            <defs>
-              <clipPath id="recharts3-clip">
-                <rect x="40" y="10" height="190" width="654" />
-              </clipPath>
-            </defs>
-            <g
-              class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"
-            >
-              <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="67.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="67.25" dy="0.71em">Jan</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="121.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="121.75" dy="0.71em">Feb</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="176.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="176.25" dy="0.71em">Mar</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="230.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="230.75" dy="0.71em">Apr</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="285.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="285.25" dy="0.71em">May</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="339.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="339.75" dy="0.71em">Jun</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="394.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="394.25" dy="0.71em">Jul</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="448.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="448.75" dy="0.71em">Aug</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="503.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="503.25" dy="0.71em">Sep</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="557.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="557.75" dy="0.71em">Oct</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="612.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="612.25" dy="0.71em">Nov</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="666.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="666.75" dy="0.71em">Dec</tspan>
-                  </text></g
-                >
-              </g>
-            </g>
-            <g
-              class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis"
-            >
-              <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="200"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">0</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="152.5"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">65</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="105"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">130</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="57.5"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">195</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="10"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">260</tspan>
-                  </text></g
-                >
-              </g>
-            </g>
-            <g class="recharts-layer recharts-bar">
-              <g class="recharts-layer recharts-bar-rectangles">
-                <g class="recharts-layer">
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="119.11538461538461"
-                      x="55"
-                      y="80.88461538461539"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="95"
-                      x="109.5"
-                      y="105"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 109.5,105 h 10 v 95 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="122.03846153846155"
-                      x="164"
-                      y="77.96153846153845"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="81.11538461538461"
-                      x="218.5"
-                      y="118.88461538461539"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="114"
-                      x="273"
-                      y="86"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 273,86 h 10 v 114 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="117.65384615384616"
-                      x="327.5"
-                      y="82.34615384615384"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="103.76923076923076"
-                      x="382"
-                      y="96.23076923076924"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="92.80769230769232"
-                      x="436.5"
-                      y="107.19230769230768"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="92.80769230769232"
-                      x="491"
-                      y="107.19230769230768"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="127.8846153846154"
-                      x="545.5"
-                      y="72.1153846153846"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="105.23076923076924"
-                      x="600"
-                      y="94.76923076923076"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="115.46153846153845"
-                      x="654.5"
-                      y="84.53846153846155"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"
-                    />
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g class="recharts-layer recharts-bar">
-              <g class="recharts-layer recharts-bar-rectangles">
-                <g class="recharts-layer">
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="112.53846153846155"
-                      x="69"
-                      y="87.46153846153845"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="151.26923076923077"
-                      x="123.5"
-                      y="48.730769230769226"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="181.23076923076923"
-                      x="178"
-                      y="18.769230769230774"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="165.8846153846154"
-                      x="232.5"
-                      y="34.11538461538461"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="156.38461538461536"
-                      x="287"
-                      y="43.61538461538464"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="118.38461538461539"
-                      x="341.5"
-                      y="81.61538461538461"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="138.84615384615384"
-                      x="396"
-                      y="61.15384615384616"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="175.3846153846154"
-                      x="450.5"
-                      y="24.615384615384613"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="155.65384615384613"
-                      x="505"
-                      y="44.34615384615387"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="179.76923076923077"
-                      x="559.5"
-                      y="20.230769230769226"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="173.19230769230768"
-                      x="614"
-                      y="26.80769230769232"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="146.15384615384616"
-                      x="668.5"
-                      y="53.84615384615384"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"
-                    />
-                  </g>
-                </g>
-              </g>
-            </g>
-          </svg>
-          <div
-            class="recharts-tooltip-wrapper"
-            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);"
-          />
-        </div>
-        <div
-          style="position:absolute;width:0;height:0;visibility:hidden;display:none"
-        />
-      </div>
-    </div>
-  </div>
-</div>

src/components/presets/Pagination.svelte

@@ -1,120 +0,0 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<div
-  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
->
-  <div class="flex-1 flex justify-between sm:hidden">
-    <a
-      href="#"
-      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
-    >
-      Previous
-    </a>
-    <a
-      href="#"
-      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
-    >
-      Next
-    </a>
-  </div>
-  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-    <div>
-      <p class="text-sm text-gray-700">
-        Showing
-        <span class="font-medium">1</span>
-        to
-        <span class="font-medium">10</span>
-        of
-        <span class="font-medium">97</span>
-        results
-      </p>
-    </div>
-    <div>
-      <nav
-        class="relative z-0 inline-flex shadow-sm -space-x-px"
-        aria-label="Pagination"
-      >
-        <a
-          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-        >
-          <span class="sr-only">Previous</span>
-          <!-- Heroicon name: chevron-left -->
-          <svg
-            class="h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          1
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          2
-        </a>
-        <a
-          href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          3
-        </a>
-        <span
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
-        >
-          ...
-        </span>
-        <a
-          href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          8
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          9
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          10
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-        >
-          <span class="sr-only">Next</span>
-          <!-- Heroicon name: chevron-right -->
-          <svg
-            class="h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </a>
-      </nav>
-    </div>
-  </div>
-</div>

src/components/presets/Profile.svelte

@@ -1,289 +0,0 @@
-<div class="min-h-screen w-full p-4">
-  <div class="section-title w-full mb-6 pt-3">
-    <div class="flex flex-row items-center justify-between mb-4">
-      <div class="flex flex-col">
-        <div class="text-xs uppercase font-light text-grey-500">Pages</div>
-        <div class="text-xl font-bold">User profile</div>
-      </div>
-    </div>
-  </div>
-  <div class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
-    <div class="flex flex-row items-center justify-start p-4">
-      <div class="flex-shrink-0 w-24">
-        <img
-          src="/images/faces/m1.png"
-          alt="media"
-          class="shadow rounded-full h-20 w-20 shadow-outline mb-2"
-        />
-      </div>
-      <div class="py-2 px-2">
-        <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
-        <p class="text-sm text-grey-500 whitespace-no-wrap">
-          Vital Database Dude
-        </p>
-        <div
-          class="flex flex-row items-center justify-start w-full py-1 space-x-2"
-        >
-          <svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="stroke-current text-xl text-twitter"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path
-              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-            /></svg
-          ><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="stroke-current text-xl text-facebook"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path
-              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
-            /></svg
-          ><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="stroke-current text-xl text-instagram"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg
-          >
-        </div>
-      </div>
-      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
-        <button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          >Subscribe</button
-        ><button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          >Follow</button
-        >
-      </div>
-    </div>
-    <div class="flex flex-wrap">
-      <div class="w-full p-4">
-        <div class="flex flex-wrap flex-col w-full tabs">
-          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
-            <div class="flex-none">
-              <button class="tab tab-underline tab-active" type="button"
-                >Account settings</button
-              >
-            </div>
-            <div class="flex-none">
-              <button class="tab tab-underline" type="button"
-                >Email preferences</button
-              >
-            </div>
-            <div class="flex-none">
-              <button class="tab tab-underline" type="button"
-                >Security settings</button
-              >
-            </div>
-          </div>
-          <div class="tab-content block">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">First name</div>
-                      <input
-                        name="first-name"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you first name"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Last name</div>
-                      <input
-                        name="last-name"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you last name"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Email address</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="form-input"
-                        placeholder="Enter you email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Company</div>
-                      <input
-                        name="company"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you company"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Position</div>
-                      <input
-                        name="position"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you position"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Language</div>
-                      <select name="language" class="form-select"
-                        ><option>Select language</option>
-                        <option value="english">English</option>
-                        <option value="spanish">Spanish</option>
-                        <option value="portuguese">Portuguese</option></select
-                      >
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-          <div class="tab-content hidden">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">Current email</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="form-input"
-                        placeholder="Enter you current email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New email</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="form-input"
-                        placeholder="Enter you new email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Daily updates</div>
-                      <div class="flex items-center justify-start space-x-2">
-                        <label class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="yes"
-                          /><span class="">Yes</span></label
-                        ><label
-                          class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          /><span class="">No</span></label
-                        >
-                      </div>
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Weekly updates</div>
-                      <div class="flex items-center justify-start space-x-2">
-                        <label class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="weekle-updates"
-                            class="form-radio h-4 w-4"
-                            value="yes"
-                          /><span class="">Yes</span></label
-                        ><label
-                          class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="weekle-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          /><span class="">No</span></label
-                        >
-                      </div>
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-          <div class="tab-content hidden">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">Current password</div>
-                      <input
-                        name="current-password"
-                        type="password"
-                        class="form-input"
-                        placeholder="Enter your current password"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New password</div>
-                      <input
-                        name="new-password"
-                        type="password"
-                        class="form-input"
-                        placeholder="Enter your new password"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Confirm new password</div>
-                      <input
-                        name="confirm-new-password"
-                        type="password"
-                        class="form-input"
-                        placeholder="Enter your new password confirmation"
-                      />
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

src/components/presets/Table.svelte

@@ -1,92 +0,0 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<div class="flex flex-col">
-  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-      <div
-        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
-      >
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Name
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Title
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Status
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Role
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("edit")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="flex items-center">
-                  <div class="flex-shrink-0 h-10 w-10">
-                    <img
-                      class="h-10 w-10 rounded-full"
-                      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
-                      alt=""
-                    />
-                  </div>
-                  <div class="ml-4">
-                    <div class="text-sm font-medium text-gray-900">
-                      Jane Cooper
-                    </div>
-                    <div class="text-sm text-gray-500">
-                      jane.cooper@example.com
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-gray-900">
-                  Regional Paradigm Technician
-                </div>
-                <div class="text-sm text-gray-500">Optimization</div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <span
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
-                >
-                  Active
-                </span>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                Admin
-              </td>
-              <td
-                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-              >
-                <a href="#" class="text-indigo-600 hover:text-indigo-900"
-                  >{$_("edit")}</a
-                >
-              </td>
-            </tr>
-
-            <!-- More rows... -->
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>

src/components/presets/Tabs.svelte

@@ -1,23 +0,0 @@
-<h3 class="text-lg">Tabs</h3>
-<div
-  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row"
->
-  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
-  >
-    1
-  </div>
-  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
-  >
-    2
-  </div>
-  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
-  >
-    3
-  </div>
-  <div
-    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double"
-  />
-</div>

src/components/presets/Tags.svelte

@@ -1,113 +0,0 @@
-<div>
-  <div
-    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-bell-off mr-2"
-    >
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-      <path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
-      <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
-      <path d="M18 8a6 6 0 0 0-9.33-5" />
-      <line x1="1" y1="1" x2="23" y2="23" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-arrow-right mr-2"
-    >
-      <line x1="5" y1="12" x2="19" y2="12" />
-      <polyline points="12 5 19 12 12 19" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-activity mr-2"
-    >
-      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-archive mr-2"
-    >
-      <polyline points="21 8 21 21 3 21 3 8" />
-      <rect x="1" y="3" width="22" height="5" />
-      <line x1="10" y1="12" x2="14" y2="12" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-hard-drive mr-2"
-    >
-      <line x1="22" y1="12" x2="2" y2="12" />
-      <path
-        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-      />
-      <line x1="6" y1="16" x2="6.01" y2="16" />
-      <line x1="10" y1="16" x2="10.01" y2="16" />
-    </svg>
-    Tag
-  </div>
-</div>

src/components/runners/AddRunnerModal.svelte

@@ -117,14 +117,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -137,20 +137,20 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -160,18 +160,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-runner")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-runner"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -248,7 +248,7 @@
                     >{$_("team")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -323,13 +323,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -338,7 +338,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/runners/DeleteRunnerModal.svelte

@@ -31,14 +31,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -51,20 +51,20 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -74,15 +74,10 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_('delete_runner')}
               </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_("please-confirm-the-deletion-of-runner")}
-                </p>
-              </div>
               <div class="w-full">
                 <span class="inline-block"
                   >{delete_runner.firstname} {delete_runner.lastname}</span
@@ -91,11 +86,11 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -104,7 +99,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/runners/ImportRunnerModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import csv from "csvtojson";
+	import { parse } from "papaparse";
 	import { read as readXlsx, utils as xlsx_utils } from "xlsx";
 	import { _ } from "svelte-i18n";
 	import { clickOutside } from "../base/outsideclick";
@@ -10,7 +10,6 @@
 		RunnerOrganizationService,
 	} from "@odit/lfk-client-js";
 	import { createEventDispatcher } from "svelte";
-  import Select from "svelte-select";
 	import toast from "svelte-french-toast";
 	export let opened_from;
 	export let passed_org;
@@ -46,6 +45,7 @@
 			return { label: r.name, value: `ORG_${r.id}` };
 		});
 		groups = groups.concat(orgs);
+		groups.sort((a, b) => a.label.localeCompare(b.label));
 		RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
 			const teams = val.map((r) => {
 				return {
@@ -54,6 +54,7 @@
 				};
 			});
 			groups = groups.concat(teams);
+			groups.sort((a, b) => a.label.localeCompare(b.label));
 		});
 	});
 	let selected_org;
@@ -62,13 +63,14 @@
 	let recent_processed = true;
 	$: json_output = [];
 	$: {
+		if (json_output.length === 0) {
 			if (files) {
 				if (
 					files[0].type ===
 					"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
 				) {
 					const reader = new FileReader();
-        reader.addEventListener("load", async (e) => {
+					reader.addEventListener("loadend", (e) => {
 						const data = new Uint8Array(e.target.result);
 						const out = readXlsx(data, { type: "array" });
 						json_output = xlsx_utils.sheet_to_json(
@@ -78,16 +80,17 @@
 					reader.readAsArrayBuffer(files[0]);
 				} else {
 					const reader = new FileReader();
-        reader.addEventListener("load", async (e) => {
+					reader.addEventListener("loadend", (e) => {
-          json_output = await csv({
+						json_output = parse(e.target.result, {
-            delimiter: [";", ","],
+							delimitersToGuess: [";", ","],
-            trim: true,
+							header: true,
-          }).fromString(e.target.result);
+						}).data;
 					});
 					reader.readAsText(files[0]);
 				}
 			}
 		}
+	}
 	function importAction() {
 		if (recent_processed === true) {
 			toast.loading($_("runners-are-being-imported"));
@@ -150,7 +153,7 @@
 							dispatch("created", { runners: resp });
 							toast.dismiss();
 							recent_processed = true;
-              toast($_("import-finished"));
+							toast.success($_("import-finished"));
 							cancelModal();
 						})
 						.catch((err) => {
@@ -170,7 +173,7 @@
 							dispatch("created", { runners: resp });
 							toast.dismiss();
 							recent_processed = true;
-              toast($_("import-finished"));
+							toast.success($_("import-finished"));
 							cancelModal();
 						})
 						.catch((err) => {
@@ -187,14 +190,14 @@
 
 {#if import_modal_open}
 	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			cancelModal();
 		}}
 	>
 		<div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -207,20 +210,22 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-max sm:w-full"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
 				<div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+					class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl lg:rounded-xl"
+				>
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								width="24"
 								height="24"
@@ -230,15 +235,15 @@
 								/></svg
 							>
 						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+						<div class="mt-3 sm:mt-0 sm:text-left w-full">
 							<h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
 								{$_("runner-import")}
 							</h3>
 						</div>
 					</div>
-          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+					<div class="sm:text-left w-full">
 						{#if json_output.length === 0}
-              <div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">
 									{$_("please-provide-the-required-csv-xlsx-file")}
 								</p>
@@ -256,7 +261,7 @@
 										cancelModal();
 									}}
 									type="button"
-                  class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm"
+									class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 								>
 									{$_("cancel")}
 								</button>
@@ -278,24 +283,14 @@
 							{/if}
 							{#if opened_from === "RunnerOverview"}
 								<p>{$_("group")}</p>
-                <Select
+								<select
-                  containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+									bind:value={selected_org_or_team}
-                  itemFilter={(label, filterText, option) =>
+									class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-                    label.toLowerCase().includes(filterText.toLowerCase()) ||
+								>
-                    option.id.value
+									{#each groups as g}
-                      .toString()
+										<option value={g.value}>{g.label}</option>
-                      .startsWith(filterText.toLowerCase())}
+									{/each}
-                  items={groups}
+								</select>
-                  showChevron={true}
-                  placeholder={$_(
-                    "search-for-an-organization-or-team-by-name-or-id"
-                  )}
-                  noOptionsMessage={$_("no-organization-or-team-found")}
-                  on:select={(selectedValue) => {
-                    selected_org_or_team = selectedValue.detail.value;
-                  }}
-                  on:clear={() => (selected_org_or_team = null)}
-                />
 							{/if}
 							{#if opened_from === "OrgDetail"}
 								<p>
@@ -304,15 +299,8 @@
 									})}
 								</p>
 							{/if}
-              <input
-                type="search"
-                bind:value={searchvalue}
-                placeholder={$_("datatable.search")}
-                aria-label={$_("datatable.search")}
-                class="p-2 w-full"
-              />
 							<div class="relative w-full mt-4 mb-4">
-                <div class="w-full overflow-x-auto">
+								<div class="w-full overflow-x-auto max-h-[50vh]">
 									<table class="divide-y divide-gray-200 w-full">
 										<thead class="bg-gray-50">
 											<tr class="odd:bg-white even:bg-gray-100">
@@ -378,7 +366,7 @@
 									class:opacity-50={!importButtonEnabled}
 									on:click={importAction}
 									type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+									class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
 								>
 									{$_("import-runners")}
 								</button>
@@ -387,7 +375,7 @@
 										cancelModal();
 									}}
 									type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+									class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 								>
 									{$_("cancel")}
 								</button>

src/components/runners/RunnerDetail.svelte

@@ -52,12 +52,17 @@
 					return { label: r.name, value: r };
 				});
 				groups = groups.concat(orgs);
+				groups.sort((a, b) => a.label.localeCompare(b.label));
 				RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
 					const teams = val.map((r) => {
 						return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
 					});
 					groups = groups.concat(teams);
-					group = groups.find((g) => g.value.id == editable.group);
+					groups.sort((a, b) => a.label.localeCompare(b.label));
+					let tmp_group = groups.find((g) => g.value.id == editable.group);
+					if (tmp_group) {
+						group = tmp_group.value.id;
+					}
 				});
 			}
 		);
@@ -100,7 +105,7 @@
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-							<a class="mr-2" href="./"
+							<a class="mr-2" href="/runners/"
 								><svg
 									xmlns="http://www.w3.org/2000/svg"
 									width="24"
@@ -125,20 +130,8 @@
 			{original_data.firstname}
 			{original_data.middlename || ""}
 			{original_data.lastname} [#{params.runnerid}]
-			<span
+			<span data-id="runner_actions_${editable.id}">
-				class="grid md:grid-cols-3 gap-1 md:gap-2"
-				data-id="runner_actions_${editable.id}"
-			>
 				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-					<GenerateSponsoringContracts
-						bind:sponsoring_contracts_show
-						bind:generate_runners
-					/>
-					<GenerateRunnerCards bind:cards_show bind:generate_runners />
-					<GenerateRunnerCertificates
-						bind:certificates_show
-						bind:generate_runners
-					/>
 					<div>
 						{#if delete_triggered}
 							<button
@@ -167,10 +160,19 @@
 								class:opacity-50={!save_enabled}
 								type="button"
 								on:click={submit}
-								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 								>{$_("save-changes")}</button
 							>
 						{/if}
+						<GenerateSponsoringContracts
+							bind:sponsoring_contracts_show
+							bind:generate_runners
+						/>
+						<GenerateRunnerCards bind:cards_show bind:generate_runners />
+						<GenerateRunnerCertificates
+							bind:certificates_show
+							bind:generate_runners
+						/>
 					</div>
 				{/if}
 			</span>
@@ -259,7 +261,9 @@
 			{/if}
 		</div>
 		<div class="text-sm w-full mt-2">
-			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
+			<label for="phone" class="font-semibold text-gray-700"
+				>{$_("phone")}</label
+			>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
@@ -271,27 +275,32 @@
 		</div>
 		<div class="text-sm w-full mt-2">
 			<span class="font-semibold text-gray-700">{$_("group")}</span>
-			<Select
+			<select
-				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				class="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-				itemFilter={(label, filterText, option) =>
+				bind:value={editable.group}
-					label.toLowerCase().includes(filterText.toLowerCase()) ||
+			>
-					option.id.value.toString().startsWith(filterText.toLowerCase())}
+				{#each groups as g}
-				items={groups}
+					<option value={g.value.id}>{g.label}</option>
-				showChevron={true}
+				{/each}
-				placeholder={$_("search-for-an-organization-or-team-by-name-or-id")}
+			</select>
-				noOptionsMessage={$_("no-organization-or-team-found")}
-				bind:selectedValue={group}
-				on:select={(selectedValue) => {
-					editable.group = selectedValue.detail.value.id;
-				}}
-				on:clear={() => (editable.group = null)}
-			/>
 		</div>
 		<div class="text-sm w-full mt-2">
 			<span class="font-semibold text-gray-700">{$_("distance")}</span>
 			<br />
 			<span class="text-gray-700">{original_data.distance / 1000} km</span>
 		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("total-donation-amount")}</span>
+			<br />
+			<span class="text-gray-700">{(editable.donationAmount / 100)
+					.toFixed(2)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("created_via")}</span>
+			<br />
+			<span class="text-gray-700">{original_data.created_via}</span>
+		</div>
 	</section>
 {:catch error}
 	<PromiseError {error} />

src/components/runners/Runners.svelte

@@ -1,13 +1,213 @@
 <script>
+  import {
+    RunnerOrganizationService,
+    RunnerService,
+    RunnerTeamService,
+  } from "@odit/lfk-client-js";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    renderComponent,
+  } from "@tanstack/svelte-table";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import InputElement from "../shared/InputElement.svelte";
+  import TableActions from "../shared/TableActions.svelte";
+  import { groupFilter } from "../shared/tablefilters";
+  import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
+  import TableBottom from "../shared/TableBottom.svelte";
+  import TableHeader from "../shared/TableHeader.svelte";
+
+  $: selectedRunners =
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
+  $: active_delete = undefined;
+  let dataLoaded = false;
+  export let created_via = "all";
+  export let current_runners = [];
+  $: sponsoring_contracts_show = selected.length > 0;
+  $: cards_show = selected.length > 0;
+  $: certificates_show = selected.length > 0;
+  $: teams = [];
+  $: orgs = [];
+
+  export const addRunners = (runners) => {
+    current_runners = current_runners.concat(...runners);
+    options.update((options) => ({
+      ...options,
+      data: current_runners,
+    }));
+  };
+
+  //Section table
+  const columns = [
+    {
+      accessorKey: "id",
+      header: () => "id",
+      filterFn: `equalsString`,
+    },
+    {
+      accessorKey: "firstname",
+      header: () => $_("first-name"),
+      filterFn: `includesString`,
+    },
+    {
+      accessorKey: "middlename",
+      header: () => $_("middle-name"),
+      cell: (info) => {
+        if (!info || !info.getValue()) {
+          return "";
+        }
+        return info.getValue();
+      },
+      filterFn: `includesString`,
+    },
+    {
+      accessorKey: "lastname",
+      header: () => $_("last-name"),
+      filterFn: `includesString`,
+    },
+    {
+      accessorKey: "created_via",
+      header: () => "created_via",
+      filterFn: `includesString`,
+    },
+    {
+      accessorKey: "group",
+      header: () => $_("group"),
+      cell: (info) => {
+        const group = info.getValue();
+        if (group.responseType === "RUNNERORGANIZATION") {
+          return group.name;
+        }
+        return `${group.parentGroup.name} > ${group.name}`;
+      },
+      filterFn: `group`,
+      sortingFn: (rowA, rowB, col) => {
+        return rowA.original.group.name.localeCompare(rowB.original.group.name);
+      },
+    },
+    {
+      accessorKey: "distance",
+      header: () => $_("distance"),
+      sortingFn: (rowA, rowB, col) => {
+        return rowA.original.distance > rowB.original.distance;
+      },
+      cell: (info) => {
+        if (info.getValue() < 1000) {
+          return `${info.getValue()} m`;
+        }
+        return `${(info.getValue() / 1000).toFixed(1)} km`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "actions",
+      header: () => $_("action"),
+      cell: (info) => {
+        return renderComponent(TableActions, {
+          detailsLink: `/runners/${info.row.original.id}`,
+          deleteAction: () => {
+            active_delete =
+              current_runners[
+                current_runners.findIndex((r) => r.id == info.row.original.id)
+              ];
+          },
+          deleteEnabled:
+            store.state.jwtinfo.userdetails.permissions.includes(
+              "RUNNER:DELETE"
+            ),
+        });
+      },
+      enableColumnFilter: false,
+      enableSorting: false,
+    },
+  ];
+  const options = writable({
+    data: [],
+    columns: columns,
+    filterFns: {
+      group: groupFilter,
+    },
+    initialState: {
+      pagination: {
+        pageSize: 50,
+      },
+    },
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+  const table = createSvelteTable(options);
+
+  async function deleteRunner(delete_runner_id) {
+    await RunnerService.runnerControllerRemove(delete_runner_id, true);
+    current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
+    options.update((options) => ({
+      ...options,
+      data: current_runners,
+    }));
+    toast.success($_("runner-deleted"));
+  }
+
+  onMount(async () => {
+    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+      teams = val;
+    });
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+      (val) => {
+        orgs = val;
+      }
+    );
+
+    let page = 0;
+    while (page >= 0) {
+      const runners = await RunnerService.runnerControllerGetAll(
+        page,
+        500,
+      );
+      if (runners.length == 0) {
+        page = -2;
+      }
+
+      current_runners = current_runners.concat(...runners);
+      options.update((options) => ({
+        ...options,
+        data: current_runners,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+  });
   import { _ } from "svelte-i18n";
   import store from "../../store";
   import AddRunnerModal from "./AddRunnerModal.svelte";
   import ImportRunnerModal from "./ImportRunnerModal.svelte";
-  import RunnersOverview from "./RunnersOverview.svelte";
+  import toast from "svelte-french-toast";
   $: current_runners = [];
   export let modal_open = false;
   export let import_modal_open = false;
-  let addRunners;
+
+  if (created_via != "all") {
+    $table.setColumnFilters([
+      {
+        id: "created_via",
+        value: created_via,
+      },
+    ]);
+  }
 </script>
 
 <section class="container p-5">
@@ -20,7 +220,7 @@
         modal_open = true;
       }}
       type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
     >
       {$_("laeufer-hinzufuegen")}
     </button>
@@ -29,12 +229,88 @@
         import_modal_open = true;
       }}
       type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
     >
       {$_("import-runners")}
     </button>
   {/if}
-  <RunnersOverview bind:current_runners bind:addRunners />
+  <DeleteRunnerModal
+    delete_runner={active_delete}
+    modal_open={active_delete != undefined}
+    on:delete={(event) => {
+      deleteRunner(event.detail.id);
+    }}
+  />
+  {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+    {#if !dataLoaded}
+      <div
+        class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+        role="alert"
+      >
+        <p class="font-bold">{$_("runners-are-being-loaded")}</p>
+        <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+      </div>
+    {:else}
+      <GenerateSponsoringContracts
+        bind:sponsoring_contracts_show
+        bind:generate_runners={selectedRunners}
+      />
+      <GenerateRunnerCards
+        bind:cards_show
+        bind:generate_runners={selectedRunners}
+      />
+      <GenerateRunnerCertificates
+        bind:certificates_show
+        bind:generate_runners={selectedRunners}
+      />
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead class="border-b border-gray-400">
+            {#each $table.getHeaderGroups() as headerGroup}
+              <tr class="select-none">
+                <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+                  <InputElement
+                    type="checkbox"
+                    checked={$table.getIsAllRowsSelected()}
+                    indeterminate={$table.getIsSomeRowsSelected()}
+                    on:change={() => $table.toggleAllRowsSelected()}
+                  />
+                </th>
+                {#each headerGroup.headers as header}
+                  <TableHeader {header} />
+                {/each}
+              </tr>
+            {/each}
+          </thead>
+          <tbody>
+            {#each $table.getRowModel().rows as row}
+              <tr class="odd:bg-white even:bg-gray-100">
+                <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                  <InputElement
+                    type="checkbox"
+                    checked={row.getIsSelected()}
+                    on:change={() => row.toggleSelected()}
+                  />
+                </td>
+                {#each row.getVisibleCells() as cell}
+                  <td>
+                    <svelte:component
+                      this={flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    />
+                  </td>
+                {/each}
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+      <div class="h-2" />
+    {/if}
+  {/if}
+  <TableBottom {table} {selected} />
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
@@ -58,3 +334,9 @@
     }}
   />
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>

src/components/runners/RunnersOverview.svelte

@@ -1,267 +0,0 @@
-<script>
-  import {
-    RunnerOrganizationService,
-    RunnerService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import {
-    createSvelteTable,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    renderComponent,
-  } from "@tanstack/svelte-table";
-  import { onMount } from "svelte";
-  import { _ } from "svelte-i18n";
-  import { writable } from "svelte/store";
-  import store from "../../store";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import InputElement from "../shared/InputElement.svelte";
-  import TableActions from "../shared/TableActions.svelte";
-  import { groupFilter } from "../shared/tablefilters";
-  import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
-  import TableBottom from "../shared/TableBottom.svelte";
-  import TableHeader from "../shared/TableHeader.svelte";
-
-  $: selectedRunners =
-    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
-  $: selected =
-    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
-
-  $: active_delete = undefined;
-  let dataLoaded = false;
-  export let current_runners = [];
-  $: sponsoring_contracts_show = selected.length > 0;
-  $: cards_show = selected.length > 0;
-  $: certificates_show = selected.length > 0;
-  $: teams = [];
-  $: orgs = [];
-
-  export const addRunners = (runners) => {
-    current_runners = current_runners.concat(...runners);
-    options.update((options) => ({
-      ...options,
-      data: current_runners,
-    }));
-  };
-
-  //Section table
-  const columns = [
-    {
-      accessorKey: "id",
-      header: () => "id",
-      filterFn: `equalsString`,
-    },
-    {
-      accessorKey: "firstname",
-      header: () => $_("first-name"),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "middlename",
-      header: () => $_("middle-name"),
-      cell: (info) => {
-        if (!info || !info.getValue()) {
-          return "";
-        }
-        return info.getValue();
-      },
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "lastname",
-      header: () => $_("last-name"),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "group",
-      header: () => $_("group"),
-      cell: (info) => {
-        const group = info.getValue();
-        if (group.responseType === "RUNNERORGANIZATION") {
-          return group.name;
-        }
-        return `${group.parentGroup.name} > ${group.name}`;
-      },
-      filterFn: `group`,
-    },
-    {
-      accessorKey: "distance",
-      header: () => $_("distance"),
-      cell: (info) => {
-        if (info.getValue() < 1000) {
-          return `${info.getValue()} m`;
-        }
-        return `${(info.getValue() / 1000).toFixed(1)} km`;
-      },
-      enableColumnFilter: false,
-    },
-    {
-      accessorKey: "actions",
-      header: () => $_("action"),
-      cell: (info) => {
-        return renderComponent(TableActions, {
-          detailsLink: `./${info.row.original.id}`,
-          deleteAction: () => {
-            active_delete =
-              current_runners[
-                current_runners.findIndex((r) => r.id == info.row.original.id)
-              ];
-          },
-          deleteEnabled:
-            store.state.jwtinfo.userdetails.permissions.includes(
-              "RUNNER:DELETE"
-            ),
-        });
-      },
-      enableColumnFilter: false,
-      enableSorting: false,
-    },
-  ];
-  const options = writable({
-    data: [],
-    columns: columns,
-    filterFns: {
-      group: groupFilter,
-    },
-    initialState: {
-      pagination: {
-        pageSize: 50,
-      },
-    },
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-  const table = createSvelteTable(options);
-
-  async function deleteRunner(delete_runner_id) {
-    await RunnerService.runnerControllerRemove(delete_runner_id, true);
-    current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
-    options.update((options) => ({
-      ...options,
-      data: current_runners,
-    }));
-    toast($_("runner-deleted"));
-  }
-
-  onMount(async () => {
-    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-      teams = val;
-    });
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        orgs = val;
-      }
-    );
-
-    let page = 0;
-    while (page >= 0) {
-      const runners = await RunnerService.runnerControllerGetAll(page, 500);
-      if (runners.length == 0) {
-        page = -2;
-      }
-
-      current_runners = current_runners.concat(...runners);
-      options.update((options) => ({
-        ...options,
-        data: current_runners,
-      }));
-
-      dataLoaded = true;
-      page++;
-    }
-  });
-</script>
-
-<DeleteRunnerModal
-  delete_runner={active_delete}
-  modal_open={active_delete != undefined}
-  on:delete={(event) => {
-    deleteRunner(event.detail.id);
-  }}
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
-  {#if !dataLoaded}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
-    >
-      <p class="font-bold">{$_("runners-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:else}
-    <div class="h-12 mt-2">
-      <GenerateSponsoringContracts
-        bind:sponsoring_contracts_show
-        bind:generate_runners={selectedRunners}
-      />
-      <GenerateRunnerCards
-        bind:cards_show
-        bind:generate_runners={selectedRunners}
-      />
-      <GenerateRunnerCertificates
-        bind:certificates_show
-        bind:generate_runners={selectedRunners}
-      />
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="border-b border-gray-400">
-          {#each $table.getHeaderGroups() as headerGroup}
-            <tr class="select-none">
-              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-                <InputElement
-                  type="checkbox"
-                  checked={$table.getIsAllRowsSelected()}
-                  indeterminate={$table.getIsSomeRowsSelected()}
-                  on:change={() => $table.toggleAllRowsSelected()}
-                />
-              </th>
-              {#each headerGroup.headers as header}
-                <TableHeader {header} />
-              {/each}
-            </tr>
-          {/each}
-        </thead>
-        <tbody>
-          {#each $table.getRowModel().rows as row}
-            <tr class="odd:bg-white even:bg-gray-100">
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                <InputElement
-                  type="checkbox"
-                  checked={row.getIsSelected()}
-                  on:change={() => row.toggleSelected()}
-                />
-              </td>
-              {#each row.getVisibleCells() as cell}
-                <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
-                  />
-                </td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-    <div class="h-2" />
-  {/if}
-{/if}
-<TableBottom {table} {selected} />
-
-<style>
-  table tbody tr td:nth-child(2) {
-    font-family: monospace;
-  }
-</style>

src/components/scans/AddScanModal.svelte

@@ -68,14 +68,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -88,18 +88,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -112,18 +112,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-scan-fixed-only")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-nessecary-information-to-create-a-new-scan"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="donor"
@@ -131,7 +131,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -180,13 +180,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -195,7 +195,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/scans/DeleteScanModal.svelte

@@ -33,14 +33,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -53,20 +53,20 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -76,21 +76,21 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_("please-confirm-the-deletion-of-scan")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
-                {$_("please-confirm-the-deletion-of-scan")} #{delete_scan.id}
+                #{delete_scan.id}
               </div>
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -99,7 +99,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/scans/ScanDetail.svelte

@@ -72,7 +72,7 @@
 	function deleteScan() {
 		ScanService.scanControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("deleted-scan"));
+				toast.success($_("deleted-scan"));
 				location.replace("./");
 			})
 			.catch((err) => {
@@ -169,7 +169,7 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
@@ -218,7 +218,7 @@
 				>{$_("runner")}</label
 			>
 			<Select
-				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					filterRunners(label, filterText, option)}
 				items={current_runners}

src/components/scans/ScansOverview.svelte

@@ -174,7 +174,7 @@
       ...options,
       data: current_scans,
     }));
-    toast($_("scan-deleted"));
+    toast.success($_("scan-deleted"));
   }
 
   onMount(async () => {

src/components/scanstations/AddScanStationModal.svelte

@@ -72,14 +72,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -92,18 +92,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -115,25 +115,25 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-scanstation")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-create-a-new-scanstation"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="track"
                     class="block text-sm font-medium text-gray-700">Track</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -178,7 +178,7 @@
                       name="enabled"
                       type="checkbox"
                       checked={enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                     {$_("this-scanstation-is")}
                     {#if enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
@@ -188,13 +188,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -203,7 +203,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/scanstations/ConfirmScanStationDeletion.svelte

@@ -15,7 +15,7 @@
   function deleteStation() {
     ScanStationService.scanStationControllerRemove(delete_station.id, true)
       .then((resp) => {
-        toast($_("station-deleted"));
+        toast.success($_("station-deleted"));
         location.replace("./");
       })
       .catch((err) => {});
@@ -24,12 +24,12 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={cancelDelete}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -42,18 +42,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -62,11 +62,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("attention")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "do-you-want-to-delete-this-donor-with-all-related-donations"
@@ -78,18 +78,18 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={deleteStation}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("confirm-delete-station-with-all-scans")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel-keep-station")}
           </button>

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { _ } from "svelte-i18n";
 	import { tick } from "svelte";
-	import bwipjs from "bwip-js";
+	import { toCanvas } from "@bwip-js/browser";
 	import toast from "svelte-french-toast";
 
 	export let copy_modal_open;
@@ -51,7 +51,7 @@
 		if (bcid == "code128") {
 			codeconfig.height = 10;
 		}
-		bwipjs.toCanvas(canvas, codeconfig);
+		toCanvas(canvas, codeconfig);
 		return canvas.toDataURL("image/png");
 	}
 </script>
@@ -60,9 +60,9 @@
 	{#if valueCopy != null}
 		<textarea bind:this={areaDom}>{valueCopy}</textarea>
 	{/if}
-	<div class="fixed z-10 inset-0 overflow-y-auto">
+	<div class="fixed z-10 inset-0 overflow-y-hidden">
 		<div
-			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -75,18 +75,18 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
-							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
-								class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -96,11 +96,11 @@
 								/></svg
 							>
 						</div>
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_("token")}
 							</h3>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">
 									{$_(
 										"the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
@@ -109,7 +109,7 @@
 									{$_("please-copy-the-token-and-store-it-somewhere-save")}
 								</p>
 							</div>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<label
 									for="token"
 									class="block text-sm font-medium text-gray-700"
@@ -170,7 +170,7 @@
 						<img
 							class:w-[50%]={is_qrcode}
 							class:w-full={!is_qrcode}
-							class="md:w-auto mb-2 mx-auto"
+							class="w-full lg:max-w-[50vw] lg:max-h-[10rem] object-contain mb-2 mx-auto"
 							alt="Registrierungscode"
 							src={textToBase64Barcode(window.config.baseurl, is_qrcode)}
 						/>
@@ -178,17 +178,19 @@
 						<img
 							class:w-[50%]={is_qrcode}
 							class:w-full={!is_qrcode}
-							class="md:w-auto mb-2 mx-auto"
+							class="w-full lg:max-w-[50vw] lg:max-h-[10rem] object-contain mb-2 mx-auto"
 							alt="Registrierungscode"
 							src={barcode}
 						/>
 					</div>
 				</div>
-				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div
+					class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"
+				>
 					<button
 						on:click={close}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("yes-i-copied-the-token")}
 					</button>

src/components/scanstations/ScanStationDetail.svelte

@@ -49,7 +49,7 @@
 	function deleteStation() {
 		ScanStationService.scanStationControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("station-deleted"));
+				toast.success($_("station-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
@@ -125,7 +125,7 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
@@ -178,7 +178,7 @@
 					name="enabled"
 					type="checkbox"
 					checked={editable.enabled}
-					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 				/>
 				{$_("this-scanstation-is")}
 				{#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}

src/components/scanstations/ScanStations.svelte

@@ -165,7 +165,7 @@
 																current_stations = current_stations.filter(
 																	(obj) => obj.id !== s.id
 																);
-																toast($_("station-deleted"));
+																toast.success($_("station-deleted"));
 															})
 															.catch((err) => {
 																modal_open = true;
@@ -210,7 +210,7 @@
 				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
 			>
 				<span class="inline-block align-middle mr-8">
-					<b class="capitalize">{$_("general_promise_error")}</b>
+					<b>{$_("general_promise_error")}</b>
 					{error}
 				</span>
 			</div>

src/components/settings/ConfirmProfileDeletion.svelte

@@ -25,12 +25,12 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={cancelDelete}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -43,18 +43,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -63,11 +63,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("attention")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_("do-you-really-want-to-delete-your-profile")}
                   <br />
@@ -81,18 +81,18 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={deleteMe}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("confirm-delete-my-user-profile")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel-keep-my-profile")}
           </button>

src/components/settings/Settings.svelte

@@ -66,7 +66,7 @@
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <span class="text-3xl font-bold">{$_("settings")}</span>
     <div>
-      <div class="md:grid md:grid-cols-3 md:gap-6">
+      <div class="md:grid md:grid-cols-3 md:gap-2 lg:gap-6">
         <div class="md:col-span-1">
           <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
@@ -161,7 +161,7 @@
                   disabled={!save_enabled}
                   class:opacity-50={!save_enabled}
                   on:click={submit}
-                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
                 >
                   {$_("save-changes")}
                 </button>
@@ -174,7 +174,7 @@
   </div>
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <div>
-      <div class="md:grid md:grid-cols-3 md:gap-6">
+      <div class="md:grid md:grid-cols-3 md:gap-2 lg:gap-6">
         <div class="md:col-span-1">
           <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
@@ -225,7 +225,7 @@
                   disabled={!update_password_enabled}
                   class:opacity-50={!update_password_enabled}
                   on:click={changePassword}
-                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
                 >
                   {$_("update-password")}
                 </button>
@@ -245,7 +245,7 @@
   </div>
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <div>
-      <div class="md:grid md:grid-cols-3 md:gap-6">
+      <div class="md:grid md:grid-cols-3 md:gap-2 lg:gap-6">
         <div class="md:col-span-1">
           <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
@@ -268,7 +268,7 @@
                       on:click={() => {
                         modal_open = true;
                       }}
-                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                       >{$_("confirm-deletion")}</button
                     >
                     <button
@@ -285,7 +285,7 @@
                         delete_triggered = true;
                       }}
                       type="button"
-                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                       >{$_("delete-profile")}</button
                     >
                   {/if}

src/components/shared/TableActions.svelte

@@ -15,6 +15,8 @@
 	<button on:click={detailsAction} class="text-indigo-600 hover:text-indigo-900"
 		>{$_("details")}</button
 	>
+{:else}
+<span class="inline-block opacity-0 cursor-default" style="">{$_("details")}</span>
 {/if}
 {#if deleteEnabled}
 	<button

src/components/statsclients/AddStatsClientModal.svelte

@@ -58,14 +58,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -78,18 +78,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -101,18 +101,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-statsclient")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-create-a-new-statsclient"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="description"
@@ -133,13 +133,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -148,7 +148,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/statsclients/ConfirmStatsClientDeletion.svelte

@@ -14,7 +14,7 @@
   function deleteClient() {
     StatsClientService.statsClientControllerRemove(delete_client.id, true)
       .then((resp) => {
-        toast($_("statsclient-deleted"));
+        toast.success($_("statsclient-deleted"));
         location.replace("./");
       })
       .catch((err) => {});
@@ -23,12 +23,12 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={cancelDelete}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -41,18 +41,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -61,11 +61,11 @@
                 /></svg
               >
             </div>
-            <!-- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <!-- <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_('attention')}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     'do-you-want-to-delete-this-donor-with-all-related-donations'
@@ -77,18 +77,18 @@
             </div> -->
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={deleteClient}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("confirm-delete-statsclient")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel-keep-statsclient")}
           </button>

src/components/statsclients/CopyStatsClientTokenModal.svelte

@@ -22,7 +22,7 @@
       if (!successful) {
         throw new Error();
       }
-      toast($_("copied-token-to-clipboard"));
+      toast.success($_("copied-token-to-clipboard"));
       copied = true;
     } catch (err) {
       toast.error($_("error-whyile-copying-to-clipboard"));
@@ -37,9 +37,9 @@
   {#if valueCopy != null}
     <textarea bind:this={areaDom}>{valueCopy}</textarea>
   {/if}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-hidden">
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -52,18 +52,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -73,11 +73,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("token")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "the-statsclient-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
@@ -86,7 +86,7 @@
                   {$_("please-copy-the-token-and-store-it-somewhere-save")}
                 </p>
               </div>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <label
                   for="token"
                   class="block text-sm font-medium text-gray-700"
@@ -123,11 +123,11 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={close}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("yes-i-copied-the-token")}
           </button>

src/components/statsclients/StatsClientDetail.svelte

@@ -20,7 +20,7 @@
 	function deleteClient() {
 		StatsClientService.statsClientControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("statsclient-deleted"));
+				toast.success($_("statsclient-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/statsclients/StatsClientsOverview.svelte

@@ -118,7 +118,7 @@
                               current_clients = current_clients.filter(
                                 (obj) => obj.id !== c.id
                               );
-                              toast($_("statsclient-deleted"));
+                              toast.success($_("statsclient-deleted"));
                             })
                             .catch((err) => {
                               modal_open = true;
@@ -161,7 +161,7 @@
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
+        <b>{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

src/components/teams/AddTeamModal.svelte

@@ -69,14 +69,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -89,18 +89,18 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -112,18 +112,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-team")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-team"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -158,7 +158,7 @@
                     >{$_("organization")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -184,13 +184,13 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -199,7 +199,7 @@
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/teams/ConfirmTeamDeletion.svelte

@@ -1,103 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-
-  import { RunnerTeamService } from "@odit/lfk-client-js";
-  import { createEventDispatcher } from "svelte";
-  import toast from "svelte-french-toast";
-  export let modal_open;
-  export let delete_team;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    dispatch("cancelDelete", { id: delete_team.id });
-  }
-  function deleteTeam() {
-    toast.loading($_("deleting-team"));
-    RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
-      .then((resp) => {
-        toast.dismiss();
-        toast($_("team-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:clickOutside
-    on:click_outside={cancelDelete}
-  >
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
-    >
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
-        />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
-      >
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline"
-      >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-            >
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("attention")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_("do-you-want-to-delete-the-team-delete_team-name", {
-                    values: { teamname: delete_team.name },
-                  })}<br />{$_("all-associated-runners-will-be-deleted-too")}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={deleteTeam}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-          >
-            {$_("confirm-delete-team-and-associated-runners")}
-          </button>
-          <button
-            on:click={cancelDelete}
-            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-          >
-            {$_("cancel-keep-team")}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/teams/ConfirmTeamDeletionModal.svelte

@@ -0,0 +1,103 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+
+	import { RunnerTeamService } from "@odit/lfk-client-js";
+	import { createEventDispatcher } from "svelte";
+	import toast from "svelte-french-toast";
+	export let modal_open;
+	export let delete_team;
+	const dispatch = createEventDispatcher();
+	function cancelDelete() {
+		modal_open = false;
+		dispatch("cancelDelete", { id: delete_team.id });
+	}
+	function deleteTeam() {
+		toast.loading($_("deleting-team"));
+		RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
+			.then((resp) => {
+				toast.dismiss();
+				toast.success($_("team-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-hidden"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+						>
+							<svg
+								class="size-6 text-blue-600"
+								fill="currentColor"
+								width="24"
+								height="24"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								><path
+									fill="currentColor"
+									d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+								/></svg
+							>
+						</div>
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
+								{$_("do-you-want-to-delete-the-team-delete_team-name", {
+									values: { teamname: delete_team.name },
+								})}
+							</h3>
+							<div class="mb-6">
+								<p class="text-sm text-gray-500">
+									{$_("all-associated-runners-will-be-deleted-too")}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
+					<button
+						on:click={deleteTeam}
+						type="button"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+					>
+						{$_("confirm-delete-team-and-associated-runners")}
+					</button>
+					<button
+						on:click={cancelDelete}
+						type="button"
+						class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
+					>
+						{$_("cancel-keep-team")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/teams/TeamDetail.svelte

@@ -4,15 +4,13 @@
 		RunnerOrganizationService,
 		RunnerTeamService,
 	} from "@odit/lfk-client-js";
-	import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
 	import toast from "svelte-french-toast";
-
 	import store from "../../store";
 	import Select from "svelte-select";
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
 	import PromiseError from "../base/PromiseError.svelte";
-	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import ConfirmTeamDeletionModal from "./ConfirmTeamDeletionModal.svelte";
-	import Teams from "./Teams.svelte";
 	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
@@ -69,7 +67,7 @@
 	function deleteTeam() {
 		RunnerTeamService.runnerTeamControllerRemove(original.id, false)
 			.then((resp) => {
-				toast($_("team-deleted"));
+				toast.success($_("team-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
@@ -105,7 +103,7 @@
 	opened_from="TeamDetail"
 	bind:import_modal_open
 />
-<ConfirmTeamDeletion bind:modal_open bind:delete_team />
+<ConfirmTeamDeletionModal bind:modal_open bind:delete_team />
 {#if data_loaded}
 	<section class="container p-5">
 		<div class="flex flex-row mb-4">
@@ -139,7 +137,7 @@
 				{group.label}{" > "}
 			{/if}
 			{original.name} [#{params.teamid}]
-			<span data-id="org_actions_${teamdata.id}">
+			<div data-id="org_actions_${teamdata.id}">
 				<GenerateSponsoringContracts
 					bind:sponsoring_contracts_show
 					bind:generate_teams
@@ -192,11 +190,11 @@
 						disabled={!save_enabled}
 						class:opacity-50={!save_enabled}
 						type="button"
-						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
-			</span>
+			</div>
 		</div>
 		<div class="text-sm w-full mt-2">
 			<label for="name" class="font-semibold text-gray-700">Name</label>
@@ -214,7 +212,7 @@
 				>{$_("contact")}</label
 			>
 			<Select
-				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					label.toLowerCase().includes(filterText.toLowerCase()) ||
 					option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -233,7 +231,7 @@
 				>{$_("organization")}</label
 			>
 			<Select
-				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					label.toLowerCase().includes(filterText.toLowerCase()) ||
 					option.id.value.toString().startsWith(filterText.toLowerCase())}

src/components/teams/Teams.svelte

@@ -1,10 +1,32 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
 	import AddTeamModal from "./AddTeamModal.svelte";
-  export let modal_open = false;
-  import TeamsOverview from "./TeamsOverview.svelte";
 	let current_teams = [];
+	import { _ } from "svelte-i18n";
+	import { RunnerTeamService } from "@odit/lfk-client-js";
+	const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
+	import store, { users as usersstore } from "../../store.js";
+	import TeamsEmptyState from "./TeamsEmptyState.svelte";
+	import ConfirmTeamDeletionModal from "./ConfirmTeamDeletionModal.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_teams.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_teams.some((r) => r.is_selected === true);
+	$: certificates_show = current_teams.some((r) => r.is_selected === true);
+	$: generate_teams = current_teams.filter((r) => r.is_selected === true);
+	let delete_modal_open = false;
+	let modal_open = false;
+	let delete_team = {};
+	usersstore.subscribe((val) => {
+		current_teams = val;
+	});
+	teams_promise.then((data) => {
+		usersstore.set(data);
+	});
 </script>
 
 <section class="container p-5">
@@ -22,7 +44,183 @@
 			{$_("create-team")}
 		</button>
 	{/if}
-  <TeamsOverview bind:current_teams />
+	<ConfirmTeamDeletionModal
+		on:cancelDelete={(event) => {
+			modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open={delete_modal_open}
+		bind:delete_team
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
+		{#await teams_promise}
+			<div
+				class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+				role="alert"
+			>
+				<p class="font-bold">{$_("teams-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:then}
+			{#if current_teams.length === 0}
+				<TeamsEmptyState />
+			{:else}
+				<input
+					type="search"
+					bind:value={searchvalue}
+					placeholder={$_("datatable.search")}
+					aria-label={$_("datatable.search")}
+					class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+				/>
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_teams
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_teams />
+				<GenerateRunnerCertificates
+					bind:certificates_show
+					bind:generate_teams
+				/>
+				<div
+					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+				>
+					<table class="divide-y divide-gray-200 w-full">
+						<thead class="bg-gray-50">
+							<tr class="odd:bg-white even:bg-gray-100">
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									<button
+										on:click={() => {
+											const newstate = !current_teams.some(
+												(r) => r.is_selected === true
+											);
+											current_teams = current_teams.map((r) => {
+												r.is_selected = newstate;
+												return r;
+											});
+										}}
+										class="underline cursor-pointer select-none"
+										>{#if current_teams.some((r) => r.is_selected === true)}
+											{$_("deselect-all")}
+										{:else}{$_("select-all")}{/if}
+									</button>
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("name")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("organization")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("contact")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_teams as t}
+								{#if Object.values(t)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<tr
+										class="odd:bg-white even:bg-gray-100"
+										data-rowid="team_{t.id}"
+									>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<input
+												bind:checked={t.is_selected}
+												type="checkbox"
+												class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
+											/>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{t.name}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if t.parentGroup}
+														<a
+															href="../orgs/{t.parentGroup.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{t.parentGroup.name}</a
+														>
+													{:else}{$_("no-organization-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if t.contact}
+														<a
+															href="../contacts/{t.contact.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{t.contact.firstname}
+															{t.contact.middlename || ""}
+															{t.contact.lastname}</a
+														>
+													{:else}{$_("no-contact-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<a
+												href="./{t.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
+											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
+												<button
+													on:click={() => {
+														active_deletes[t.id] = true;
+														delete_modal_open = true;
+														delete_team = t;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									</tr>
+								{/if}
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		{:catch error}
+			<div
+				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
+			>
+				<span class="inline-block align-middle mr-8">
+					<b>{$_("general_promise_error")}</b>
+					{error}
+				</span>
+			</div>
+		{/await}
+	{/if}
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:CREATE")}