fix: shift dialog info alert layout and full-width toggle

Made-with: Cursor

apps/app/src/components/sections/CreateShiftDialog.vue

@@ -259,47 +259,52 @@ function onSubmit() {
             border-color="info"
             density="comfortable"
             :icon="false"
-            class="mb-6"
+            class="mb-6 pa-0 overflow-hidden"
           >
-            <div class="d-flex align-start gap-3">
-              <VIcon
-                icon="tabler-info-circle"
-                color="info"
-                size="22"
-                class="mt-1 flex-shrink-0"
-              />
-              <div class="flex-grow-1 min-width-0">
-                <VBtn
-                  variant="text"
-                  block
-                  class="d-flex justify-space-between align-center px-0 text-high-emphasis"
-                  height="auto"
-                  min-height="0"
-                  @click="toggleTimeSlotHelp"
-                >
-                  <span class="text-body-1 font-weight-medium text-start me-2">
-                    Tijdsloten in dit evenement
-                  </span>
-                  <VIcon
-                    :icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
-                    size="20"
-                    class="text-medium-emphasis flex-shrink-0"
-                  />
-                </VBtn>
-                <VExpandTransition>
-                  <div
-                    v-show="timeSlotHelpOpen"
-                    class="text-body-2 mt-3"
-                  >
-                    <p class="mb-2">
-                      {{ tooltipText.main }}
-                    </p>
-                    <p class="text-caption text-medium-emphasis mb-0">
-                      <span class="font-weight-medium text-high-emphasis">Tip:</span>
-                      {{ tooltipText.tip }}
-                    </p>
+            <div
+              role="button"
+              tabindex="0"
+              class="cursor-pointer pa-4 text-start"
+              :aria-expanded="timeSlotHelpOpen"
+              aria-controls="shift-time-slot-help"
+              @click="toggleTimeSlotHelp"
+              @keydown.enter.prevent="toggleTimeSlotHelp"
+              @keydown.space.prevent="toggleTimeSlotHelp"
+            >
+              <div class="d-flex align-start gap-3">
+                <VIcon
+                  icon="tabler-info-circle"
+                  color="info"
+                  size="22"
+                  class="flex-shrink-0 align-self-start"
+                />
+                <div class="flex-grow-1 min-width-0">
+                  <div class="d-flex align-center flex-nowrap gap-2">
+                    <span class="text-body-1 font-weight-medium text-high-emphasis flex-grow-1 min-width-0">
+                      Tijdsloten in dit evenement
+                    </span>
+                    <VIcon
+                      :icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
+                      size="22"
+                      class="text-medium-emphasis flex-shrink-0"
+                    />
                   </div>
-                </VExpandTransition>
+                  <VExpandTransition>
+                    <div
+                      v-show="timeSlotHelpOpen"
+                      id="shift-time-slot-help"
+                      class="text-body-2 mt-3 text-medium-emphasis"
+                    >
+                      <p class="mb-2 text-high-emphasis">
+                        {{ tooltipText.main }}
+                      </p>
+                      <p class="text-caption mb-0">
+                        <span class="font-weight-semibold text-high-emphasis">Tip:</span>
+                        {{ tooltipText.tip }}
+                      </p>
+                    </div>
+                  </VExpandTransition>
+                </div>
               </div>
             </div>
           </VAlert>