fix: css bug after container browser update

Backend/src/main.css

@@ -1,163 +1,157 @@
 @import "tailwindcss";
 @source "../templates/*.templ";
 @plugin "@iconify/tailwind4" {
-  scale: 1.25;
+    scale: 1.25;
 }
 
 @theme {
-  --color-accent-50: #e7fdea;
+    --color-accent-50: #e7fdea;
-  --color-accent-100: #cbfbd1;
+    --color-accent-100: #cbfbd1;
-  --color-accent-200: #9cf7a8;
+    --color-accent-200: #9cf7a8;
-  --color-accent-300: #68f37a;
+    --color-accent-300: #68f37a;
-  --color-accent-400: #33ef4d;
+    --color-accent-400: #33ef4d;
-  --color-accent-500: #11db2d;
+    --color-accent-500: #11db2d;
-  --color-accent-600: #0eaf23;
+    --color-accent-600: #0eaf23;
-  --color-accent-700: #0a851b;
+    --color-accent-700: #0a851b;
-  --color-accent-800: #075a12;
+    --color-accent-800: #075a12;
-  --color-accent-900: #032b09;
+    --color-accent-900: #032b09;
-  --color-accent-950: #021805;
+    --color-accent-950: #021805;
-  --color-accent: #0eaf23;
+    --color-accent: #0eaf23;
-  --color-text-50: #f7f8f7;
+    --color-text-50: #f7f8f7;
-  --color-text-100: #f2f3f2;
+    --color-text-100: #f2f3f2;
-  --color-text-200: #e2e4e2;
+    --color-text-200: #e2e4e2;
-  --color-text-300: #d2d6d2;
+    --color-text-300: #d2d6d2;
-  --color-text-400: #c2c7c2;
+    --color-text-400: #c2c7c2;
-  --color-text-500: #afb6af;
+    --color-text-500: #afb6af;
-  --color-text-600: #97a097;
+    --color-text-600: #97a097;
-  --color-text-700: #7d877d;
+    --color-text-700: #7d877d;
-  --color-text-800: #5a625a;
+    --color-text-800: #5a625a;
-  --color-text-900: #161816;
+    --color-text-900: #161816;
-  --color-text-950: #000000;
+    --color-text-950: #000000;
 }
 
 @layer base {
-  body {
+    body {
-    -webkit-print-color-adjust: exact !important;
+        -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
-    background-color: white;
+        background-color: white;
-  }
+    }
 }
 
 @layer components {
-  .grid-main {
-    display: grid;
-    grid-template-columns: 4fr 3fr 3fr 1fr;
-    align-items: stretch;
-  }
-
-  .grid-sub {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: 1 / -1;
-    border-color: var(--color-neutral-400);
-    transition: background-color 0.2s ease-in-out;
-  }
-
-  .grid-sub.responsive {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .grid-sub:hover {
-    background-color: var(--color-neutral-200);
-  }
-
-  .grid-cell {
-    padding: calc(var(--spacing) * 2);
-    border-color: var(--color-neutral-400);
-  }
-
-  .btn {
-    width: 100%;
-    cursor: pointer;
-    border-radius: var(--radius-md);
-    color: var(--color-neutral-800);
-    font-size: var(--text-sm);
-    text-align: center;
-    padding: calc(var(--spacing) * 2);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-neutral-800);
-    transition-property:
-      color, background-color, border-color, outline-color,
-      text-decoration-color, fill, stroke, --tw-gradient-from,
-      --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(
-      --tw-ease,
-      var(--default-transition-timing-function)
-    );
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  input.btn,
-  select.btn {
-    transition-duration: 300ms;
-  }
-
-  .btn:hover {
-    color: var(--color-white);
-    background-color: var(--color-neutral-700);
-  }
-
-  .btn:disabled {
-    opacity: 50%;
-    pointer-events: none;
-  }
-
-  input.btn,
-  select.btn {
-    text-align: left;
-  }
-
-  input.btn:hover,
-  select.btn:hover {
-    border-color: var(--color-neutral-300);
-    background-color: var(--color-neutral-100);
-    color: var(--color-neutral-800);
-  }
-
-  .edit-box {
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    border-color: var(--color-neutral-500);
-    transition-property: background-color, border-color;
-    transition-timing-function: var(--default-transition-timing-function) * 2;
-    transition-duration: var(--default-transition-duration);
-    outline: none;
-
-    &:is(:where(.group):is(.edit) *) {
-      border-width: 1px;
-    }
-  }
-
-  .edit-box:hover {
-    &:is(:where(.group):is(.edit) *) {
-      background-color: var(--color-white);
-      border-color: var(--color-neutral-300);
-    }
-  }
-
-  .edit-box input:focus {
-    outline: none;
-  }
-
-  div.edit {
-    border-width: 1px;
-    background-color: var(--color-neutral-300);
-  }
-
-  @media (width >=48rem) {
     .grid-main {
-      grid-template-columns: repeat(5, 1fr);
+        display: grid;
-      margin: 0 10%;
+        grid-template-columns: 4fr 3fr 3fr 1fr;
+        align-items: stretch;
+    }
+
+    .grid-sub {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        border-color: var(--color-neutral-400);
+        transition: background-color 0.2s ease-in-out;
     }
 
     .grid-sub.responsive {
-      display: grid;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .grid-sub:hover {
+        background-color: var(--color-neutral-200);
+    }
+
+    .grid-cell {
+        padding: calc(var(--spacing) * 2);
+        border-color: var(--color-neutral-400);
     }
 
     .btn {
-      padding-inline: calc(var(--spacing) * 4);
+        width: 100%;
+        cursor: pointer;
+        border-radius: var(--radius-md);
+        color: var(--color-neutral-800);
+        font-size: var(--text-sm);
+        text-align: center;
+        padding: calc(var(--spacing) * 2);
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-color: var(--color-neutral-800);
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    input.btn,
+    select.btn {
+        transition-duration: 300ms;
+    }
+
+    .btn:hover {
+        color: var(--color-white);
+        background-color: var(--color-neutral-700);
+    }
+
+    .btn:disabled {
+        opacity: 50%;
+        pointer-events: none;
+    }
+
+    input.btn,
+    select.btn {
+        text-align: left;
+    }
+
+    input.btn:hover,
+    select.btn:hover {
+        border-color: var(--color-neutral-300);
+        background-color: var(--color-neutral-100);
+        color: var(--color-neutral-800);
+    }
+
+    .edit-box {
+        border-radius: var(--radius-md);
+        overflow: hidden;
+        border-color: var(--color-neutral-500);
+        transition-property: background-color, border-color;
+        transition-timing-function: var(--default-transition-timing-function) * 2;
+        transition-duration: var(--default-transition-duration);
+        outline: none;
+
+        &:is(:where(.group):is(.edit) *) {
+            border-width: 1px;
+        }
+    }
+
+    .edit-box:hover {
+        &:is(:where(.group):is(.edit) *) {
+            background-color: var(--color-white);
+            border-color: var(--color-neutral-300);
+        }
+    }
+
+    .edit-box input:focus {
+        outline: none;
+    }
+
+    div.edit {
+        border-width: 1px;
+        background-color: var(--color-neutral-300);
+    }
+
+    @media (width >=48rem) {
+        .grid-main {
+            grid-template-columns: repeat(5, 1fr);
+            margin: 0 10%;
+        }
+
+        .grid-sub.responsive {
+            display: grid;
+        }
+
+        .btn {
+            padding-inline: calc(var(--spacing) * 4);
+        }
     }
-  }
 }

Backend/templates/reportPage.templ

@@ -11,8 +11,8 @@ import (
 templ TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) {
 	@Base()
 	@headerComponent()
-	<div class="grid-main divide-y-1">
+	<div class="grid-main divide-y-1 @container">
-		<div class="grid-sub lg:divide-x-1 max-md:divide-y-1 responsive @container">
+		<div class="grid-sub lg:divide-x-1 max-md:divide-y-1 responsive">
 			<div class="grid-cell col-span-full bg-neutral-300 lg:border-0">
 				<h2 class="text-xl uppercase font-bold">Eigene Abrechnung</h2>
 			</div>
@@ -34,7 +34,7 @@ templ workWeekComponent(week models.WorkWeek, onlyAccept bool) {
 		year, kw := week.WeekStart.ISOWeek()
 		progress := (float32(week.WorktimeVirtual.Hours()) / week.User.ArbeitszeitPerWoche) * 100
 	}}
-	<div class="employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1 @container">
+	<div class="employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1">
 		<div class="grid-cell flex flex-col max-md:bg-neutral-300 gap-2">
 			if !onlyAccept {
 				<div class="lg:hidden">

Backend/templates/reportPage_templ.go

@@ -45,7 +45,7 @@ func TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-main divide-y-1\"><div class=\"grid-sub lg:divide-x-1 max-md:divide-y-1 responsive @container\"><div class=\"grid-cell col-span-full bg-neutral-300 lg:border-0\"><h2 class=\"text-xl uppercase font-bold\">Eigene Abrechnung</h2></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-main divide-y-1 @container\"><div class=\"grid-sub lg:divide-x-1 max-md:divide-y-1 responsive\"><div class=\"grid-cell col-span-full bg-neutral-300 lg:border-0\"><h2 class=\"text-xl uppercase font-bold\">Eigene Abrechnung</h2></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -96,7 +96,7 @@ func workWeekComponent(week models.WorkWeek, onlyAccept bool) templ.Component {
 		ctx = templ.ClearChildren(ctx)
 		year, kw := week.WeekStart.ISOWeek()
 		progress := (float32(week.WorktimeVirtual.Hours()) / week.User.ArbeitszeitPerWoche) * 100
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1 @container\"><div class=\"grid-cell flex flex-col max-md:bg-neutral-300 gap-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1\"><div class=\"grid-cell flex flex-col max-md:bg-neutral-300 gap-2\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

Docker/docker-compose.yml

@@ -13,9 +13,14 @@ services:
       - ${POSTGRES_PATH}/initdb:/docker-entrypoint-initdb.d
     ports:
       - ${POSTGRES_PORT}:5432
+    healthcheck:
+      test: ["CMD", "pg_isready", "-U", "${POSTGRES_USER}", "--dbname", "${POSTGRES_DB}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
 
   backend:
-    image: git.letsstein.de/tom/arbeitszeitmessung-webserver
+    image: git.letsstein.de/tom/arbeitszeitmessung-webserver:dev
     env_file:
       - .env
     environment:
@@ -24,7 +29,8 @@ services:
     ports:
       - ${WEB_PORT}:8080
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     volumes:
       - ${LOG_PATH}:/app/logs
     restart: unless-stopped

Jenkinsfile

@@ -1,66 +0,0 @@
-pipeline {
-        environment {
-        DOCKER_USERNAME = 'jenkins'
-        DOCKER_PASSWORD = credentials('gitea_jenkins')
-        SONAR_TOKEN = credentials('sonarcube_token')
-        POSTGRES_USER = 'postgres'
-        POSTGRES_PASSWORD = 'password'
-        POSTGRES_DB = 'arbeitszeitmessung'
-        }
-
-    agent any
-
-    stages {
-        stage('Test') {
-            agent {
-                docker {
-                    image ''
-                    args ''
-                    args ''
-                }
-            }
-            steps {
-                script {
-                    sh '''
-                    docker run -d --rm \
-                        --name test-db \
-                        -e POSTGRES_USER={$POSTGRES_USER} \
-                        -e POSTGRES_PASSWORD={$POSTGRES_PASSWORD} \
-                        -e POSTGRES_DB={$POSTGRES_DB} \
-                        -v ./DB/initdb:/docker-entrypoint-initdb.d\
-                        -p "5432:5432" \
-                        postgres:16
-                    '''
-            //         docker.image('golang:1.24.5').withRun(
-            //             '-u root:root --network=host'
-            //             ) { go ->
-            //             // wait for DB to start
-            //             sh '''
-            //             cd Backend \
-            //             go mod download && go mod tidy \
-            //             go test ./... -v
-
-            //             '''
-            // }
-                }
-            }
-        }
-            stage('SonarCube Analysis') {
-                steps {
-                    sh 'make scan'
-                }
-            }
-            stage('Building image arbeitszeit-backend') {
-                when {
-                    anyOf {
-                        changeset 'Jenkinsfile'
-                        changeset 'Makefile'
-                        changeset 'Backend/**'
-                    }
-                }
-                steps {
-                    sh 'make backend'
-                }
-            }
-    }
-}