stage

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>