reduced space that timed release takes up but putting date/time on same line and not allowing to go full width in container

Author: michaelchadwick

packages/ilios-common/addon/components/learningmaterial-manager.gjs

@@ -580,46 +580,48 @@ export default class LearningMaterialManagerComponent extends Component {
             </span>
           </div>
 
-          <div class="item timed-release-container">
+          <div class="item timed-release">
             <label>
               {{t "general.timedRelease"}}:
             </label>
             <TimedReleaseSchedule @startDate={{this.startDate}} @endDate={{this.endDate}} />
-            <div class="timed-release">
+            <div class="timed-release-dates">
               {{#if this.startDate}}
-                <div class="item start-date">
-                  <label>
-                    {{t "general.startDate"}}:
-                  </label>
-                  {{#if @editable}}
-                    <DatePicker
-                      @value={{this.startDate}}
-                      @onChange={{fn this.updateDate "startDate"}}
-                    />
-                  {{else}}
-                    {{formatDate this.startDate day="2-digit" month="2-digit" year="numeric"}}
-                  {{/if}}
-                </div>
-                <div class="item start-time">
-                  <label>
-                    {{t "general.startTime"}}:
-                  </label>
-                  {{#if @editable}}
-                    <TimePicker
-                      @date={{this.startDate}}
-                      @action={{fn this.updateTime "startDate"}}
-                    />
-                  {{else}}
-                    {{formatDate
-                      this.startDate
-                      day="2-digit"
-                      month="2-digit"
-                      year="numeric"
-                      hour12=true
-                      hour="2-digit"
-                      minute="2-digit"
-                    }}
-                  {{/if}}
+                <div class="item start">
+                  <div class="start-date">
+                    <label>
+                      {{t "general.startDate"}}:
+                    </label>
+                    {{#if @editable}}
+                      <DatePicker
+                        @value={{this.startDate}}
+                        @onChange={{fn this.updateDate "startDate"}}
+                      />
+                    {{else}}
+                      {{formatDate this.startDate day="2-digit" month="2-digit" year="numeric"}}
+                    {{/if}}
+                  </div>
+                  <div class="start-time">
+                    <label>
+                      {{t "general.startTime"}}:
+                    </label>
+                    {{#if @editable}}
+                      <TimePicker
+                        @date={{this.startDate}}
+                        @action={{fn this.updateTime "startDate"}}
+                      />
+                    {{else}}
+                      {{formatDate
+                        this.startDate
+                        day="2-digit"
+                        month="2-digit"
+                        year="numeric"
+                        hour12=true
+                        hour="2-digit"
+                        minute="2-digit"
+                      }}
+                    {{/if}}
+                  </div>
                 </div>
                 {{#if @editable}}
                   <button
@@ -643,42 +645,44 @@ export default class LearningMaterialManagerComponent extends Component {
                 </p>
               {{/if}}
               {{#if this.endDate}}
-                <div class="item end-date">
-                  <label>
-                    {{t "general.endDate"}}:
-                  </label>
-                  {{#if @editable}}
-                    <DatePicker
-                      @value={{this.endDate}}
-                      @onChange={{fn this.updateDate "endDate"}}
-                    />
-                  {{else}}
-                    {{formatDate this.endDate day="2-digit" month="2-digit" year="numeric"}}
-                  {{/if}}
-                </div>
-                <div class="item end-time">
-                  <label>
-                    {{t "general.endTime"}}:
-                  </label>
-                  {{#if @editable}}
-                    <TimePicker @date={{this.endDate}} @action={{fn this.updateTime "endDate"}} />
-                  {{else}}
-                    {{formatDate
-                      this.endDate
-                      day="2-digit"
-                      month="2-digit"
-                      year="numeric"
-                      hour12=true
-                      hour="2-digit"
-                      minute="2-digit"
-                    }}
-                  {{/if}}
+                <div class="item end">
+                  <div class="end-date">
+                    <label>
+                      {{t "general.endDate"}}:
+                    </label>
+                    {{#if @editable}}
+                      <DatePicker
+                        @value={{this.endDate}}
+                        @onChange={{fn this.updateDate "endDate"}}
+                      />
+                    {{else}}
+                      {{formatDate this.endDate day="2-digit" month="2-digit" year="numeric"}}
+                    {{/if}}
+                  </div>
+                  <div class="end-time">
+                    <label>
+                      {{t "general.endTime"}}:
+                    </label>
+                    {{#if @editable}}
+                      <TimePicker @date={{this.endDate}} @action={{fn this.updateTime "endDate"}} />
+                    {{else}}
+                      {{formatDate
+                        this.endDate
+                        day="2-digit"
+                        month="2-digit"
+                        year="numeric"
+                        hour12=true
+                        hour="2-digit"
+                        minute="2-digit"
+                      }}
+                    {{/if}}
+                  </div>
+                  <YupValidationMessage
+                    @description={{t "general.endDate"}}
+                    @validationErrors={{this.validations.errors.endDate}}
+                    data-test-end-date-validation-error-message
+                  />
                 </div>
-                <YupValidationMessage
-                  @description={{t "general.endDate"}}
-                  @validationErrors={{this.validations.errors.endDate}}
-                  data-test-end-date-validation-error-message
-                />
                 {{#if @editable}}
                   <button
                     class="remove-date"

packages/ilios-common/app/styles/ilios-common/components/learningmaterial-manager.scss

@@ -70,12 +70,6 @@
     margin: 0;
   }
 
-  @include m.for-laptop-and-up {
-    .timed-release-container {
-      grid-column: 1 / -1;
-    }
-  }
-
   .timed-release {
     margin-bottom: 2rem;
 
@@ -93,6 +87,13 @@
       min-width: 150px;
     }
 
+    .start,
+    .end {
+      display: flex;
+      flex-direction: row;
+      gap: 1em;
+    }
+
     .add-date {
       border: 1px solid var(--green);
       color: var(--green);
@@ -102,5 +103,9 @@
       border: 1px solid var(--red);
       color: var(--red);
     }
+
+    .time-picker {
+      gap: 0.5em;
+    }
   }
 }