Merge branch '297211-styling-cleanup' into 'master'

Rotation controls styling cleanup

See merge request gitlab-org/gitlab!51353

app/assets/stylesheets/page_bundles/oncall_schedules.scss

@@ -32,13 +32,17 @@
 .rotations-modal {
   .gl-card {
     min-width: 75%;
-    width: fit-content;
-    @include gl-bg-gray-10;
   }
 
   &.gl-modal .modal-md {
     max-width: 640px;
   }
+
+  // TODO: move to gitlab/ui utilities
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/297502
+  .gl-w-fit-content {
+    width: fit-content;
+  }
 }
 
 //// Copied from roadmaps.scss - adapted for on-call schedules

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue

@@ -208,7 +208,7 @@ export default {
           <gl-dropdown
             data-testid="rotation-start-time"
             :text="format24HourTimeStringFromInt(form.startsAt.time)"
-            class="gl-w-12 gl-pl-3"
+            class="gl-px-3"
           >
             <gl-dropdown-item
               v-for="time in $options.HOURS_IN_DAY"
@@ -220,11 +220,11 @@ export default {
               <span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span>
             </gl-dropdown-item>
           </gl-dropdown>
-          <span class="gl-pl-5"> {{ schedule.timezone }} </span>
+          <span> {{ schedule.timezone }} </span>
         </div>
       </gl-form-group>
     </div>
-
+    <div class="gl-w-fit-content">
       <gl-toggle
         v-model="endDateEnabled"
         :label="$options.i18n.fields.endsOn.enableToggle"
@@ -232,11 +232,16 @@ export default {
         class="gl-mb-5"
       />
 
-    <gl-card v-if="endDateEnabled" data-testid="rotation-ends-on">
+      <gl-card
+        v-if="endDateEnabled"
+        data-testid="rotation-ends-on"
+        class="gl-border-gray-400 gl-bg-gray-10 gl-w-fit-content"
+      >
         <gl-form-group
           :label="$options.i18n.fields.endsOn.title"
           label-size="sm"
           :invalid-feedback="$options.i18n.fields.endsOn.error"
+          class="gl-mb-0"
         >
           <div class="gl-display-flex gl-align-items-center">
             <gl-datepicker
@@ -247,7 +252,7 @@ export default {
             <gl-dropdown
               data-testid="rotation-end-time"
               :text="format24HourTimeStringFromInt(form.endsOn.time)"
-            class="gl-w-12 gl-pl-3"
+              class="gl-px-3"
             >
               <gl-dropdown-item
                 v-for="time in $options.HOURS_IN_DAY"
@@ -256,10 +261,12 @@ export default {
                 is-check-item
                 @click="$emit('update-rotation-form', { type: 'endsOn.time', value: time })"
               >
-              <span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span>
+                <span class="gl-white-space-nowrap">
+                  {{ format24HourTimeStringFromInt(time) }}</span
+                >
               </gl-dropdown-item>
             </gl-dropdown>
-          <div class="gl-mx-5">{{ schedule.timezone }}</div>
+            <span>{{ schedule.timezone }}</span>
           </div>
         </gl-form-group>
       </gl-card>
@@ -269,14 +276,19 @@ export default {
         data-testid="restricted-to-toggle"
         :label="$options.i18n.fields.restrictToTime.enableToggle"
         label-position="left"
-      class="gl-my-5"
+        class="gl-mt-5"
       />
 
-    <gl-card v-if="restrictToTimeEnabled" data-testid="restricted-to-time">
+      <gl-card
+        v-if="restrictToTimeEnabled"
+        data-testid="restricted-to-time"
+        class="gl-mt-5 gl-border-gray-400 gl-bg-gray-10"
+      >
         <gl-form-group
           :label="$options.i18n.fields.restrictToTime.title"
           label-size="sm"
           :invalid-feedback="$options.i18n.fields.endsOn.error"
+          class="gl-mb-0"
         >
           <div class="gl-display-flex gl-align-items-center">
             <span> {{ __('From') }} </span>
@@ -292,7 +304,9 @@ export default {
                 is-check-item
                 @click="$emit('update-rotation-form', { type: 'restrictedTo.from', value: time })"
               >
-              <span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span>
+                <span class="gl-white-space-nowrap">
+                  {{ format24HourTimeStringFromInt(time) }}</span
+                >
               </gl-dropdown-item>
             </gl-dropdown>
             <span> {{ __('To') }} </span>
@@ -308,11 +322,15 @@ export default {
                 is-check-item
                 @click="$emit('update-rotation-form', { type: 'restrictedTo.to', value: time })"
               >
-              <span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span>
+                <span class="gl-white-space-nowrap">
+                  {{ format24HourTimeStringFromInt(time) }}</span
+                >
               </gl-dropdown-item>
             </gl-dropdown>
+            <span>{{ schedule.timezone }} </span>
           </div>
         </gl-form-group>
       </gl-card>
+    </div>
   </gl-form>
 </template>