From fd74a0fe29a8e2f563638ffb09f00a0b73458bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Thu, 11 Dec 2025 01:14:14 +0100
Subject: [PATCH] stage

---
 .../employees/a-employee-timeblock-header.vue | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-header.vue b/app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-header.vue
index 01eca37..2a08bcb 100644
--- a/app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-header.vue
+++ b/app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-header.vue
@@ -210,6 +210,10 @@ const dateFormat = computed(() => {
 </script>
 
 <style lang="sass" scoped>
+.timeblock__header
+  container-type: inline-size
+  container-name: timeblock-header
+
 .timeblock__header__top
   padding: 8px 16px 0 16px
   font-weight: 400
@@ -223,7 +227,7 @@ const dateFormat = computed(() => {
   border-bottom: 1px solid #e5e5e5
   padding: 8px 16px
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     flex-direction: column
     align-items: stretch
 
@@ -232,7 +236,7 @@ const dateFormat = computed(() => {
   align-items: center
   justify-content: space-between
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     width: 100%
 
 .timeblock__date
@@ -241,7 +245,7 @@ const dateFormat = computed(() => {
   flex: 1
   max-width: 220px
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     max-width: 170px
 
     ::v-deep
@@ -322,7 +326,7 @@ const dateFormat = computed(() => {
     display: flex
     gap: 10px
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     width: 100%
     flex: 1
 
@@ -373,25 +377,25 @@ const dateFormat = computed(() => {
 
 .actions--mobile
   display: none
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     display: flex
 
 .actions--desktop
   display: block
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     display: none
 
 .timeblock__time-overview__label--desktop
   display: block
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     display: none
 
 .timeblock__time-overview__label--mobile
   display: none
 
-  @media (max-width: 768px)
+  @container timeblock-header (max-width: 768px)
     display: block
     white-space: nowrap
 </style>