From 8625fcc33203959509dacec05897fa6c11a4785d Mon Sep 17 00:00:00 2001
From: Jonathan Johnson <jon.johnson@ucsf.edu>
Date: Thu, 5 Mar 2026 22:26:22 -0800
Subject: [PATCH 1/3] Extract Mixin for Ilios Overview

Making this a share style instead of a mixin, and removed the
course-overview mixin at the same time as it depended on overview. I
didn't update the curriculum inventory as that is slated for
deprecation.
---
 .../app/components/learner-group/root.gjs     | 12 ++--
 .../app/components/program-year/overview.gjs  |  8 +--
 .../app/components/program/overview.gjs       | 16 ++---
 .../components/learner-group/members.scss     |  1 +
 .../styles/components/learner-group/root.scss | 17 +----
 .../styles/components/program-overview.scss   | 17 +----
 .../components/programyear-overview.scss      | 20 ++----
 .../addon/components/course/loading.gjs       | 22 +++----
 .../addon/components/course/overview.gjs      | 22 +++----
 .../components/course/summary-header.gjs      | 20 +++---
 .../addon/components/session/ilm.gjs          |  6 +-
 .../addon/components/session/overview.gjs     | 16 ++---
 .../components/course/loading.scss            | 10 ++-
 .../components/course/overview.scss           |  4 +-
 .../components/course/summary-header.scss     | 31 +++------
 .../components/session-overview.scss          | 26 ++------
 .../app/styles/ilios-common/mixins.scss       |  1 -
 .../ilios-common/mixins/course/overview.scss  | 47 --------------
 .../app/styles/ilios-common/shared.scss       |  1 +
 .../ilios-common/shared/ilios-overview.scss   | 63 +++++++++++++++++++
 20 files changed, 155 insertions(+), 205 deletions(-)
 delete mode 100644 packages/ilios-common/app/styles/ilios-common/mixins/course/overview.scss
 create mode 100644 packages/ilios-common/app/styles/ilios-common/shared/ilios-overview.scss

diff --git a/packages/frontend/app/components/learner-group/root.gjs b/packages/frontend/app/components/learner-group/root.gjs
index 5ad1b41a70..48e98a1539 100644
--- a/packages/frontend/app/components/learner-group/root.gjs
+++ b/packages/frontend/app/components/learner-group/root.gjs
@@ -487,8 +487,8 @@ export default class LearnerGroupRootComponent extends Component {
           @sortUsersBy={{this.sortUsersBy}}
           @canUpdate={{@canUpdate}}
         />
-        <section class="learner-group-overview" data-test-overview>
-          <div class="block" data-test-needs-accommodation>
+        <section class="ilios-overview learner-group-overview" data-test-overview>
+          <div class="overview-block" data-test-needs-accommodation>
             <label>{{t "general.accommodationIsRequiredForLearnersInThisGroup"}}:</label>
             <span>
               {{#if @canUpdate}}
@@ -505,7 +505,7 @@ export default class LearnerGroupRootComponent extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block defaultlocation" data-test-location>
+          <div class="overview-block" data-test-location>
             <label for="location-{{templateId}}">
               {{t "general.defaultLocation"}}:
             </label>
@@ -538,7 +538,7 @@ export default class LearnerGroupRootComponent extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block defaulturl" data-test-url>
+          <div class="overview-block defaulturl" data-test-url>
             <label for="link-{{templateId}}">
               {{t "general.defaultVirtualLearningLink"}}:
             </label>
@@ -661,7 +661,7 @@ export default class LearnerGroupRootComponent extends Component {
               @done={{fn @setIsBulkAssigning false}}
             />
           {{else if @isEditing}}
-            <div class="learner-group-overview-content">
+            <div class="overview-content">
               <UserManager
                 @filter={{this.filter}}
                 @learnerGroupId={{this.learnerGroupId}}
@@ -681,7 +681,7 @@ export default class LearnerGroupRootComponent extends Component {
             {{#if @showCalendar}}
               <Calendar @learnerGroup={{@learnerGroup}} />
             {{/if}}
-            <div class="learner-group-overview-content">
+            <div class="overview-content">
               <Members
                 @filter={{this.filter}}
                 @learnerGroupId={{this.learnerGroupId}}
diff --git a/packages/frontend/app/components/program-year/overview.gjs b/packages/frontend/app/components/program-year/overview.gjs
index 8a1b8ae7f7..0d5cec703c 100644
--- a/packages/frontend/app/components/program-year/overview.gjs
+++ b/packages/frontend/app/components/program-year/overview.gjs
@@ -3,12 +3,12 @@ import { LinkTo } from '@ember/routing';
 import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import { faChartColumn } from '@fortawesome/free-solid-svg-icons';
 <template>
-  <div class="programyear-overview" data-test-program-year-overview ...attributes>
-    <div class="programyear-overview-header">
-      <h4 data-test-title>
+  <div class="ilios-overview programyear-overview" data-test-program-year-overview ...attributes>
+    <div class="overview-header">
+      <h4 class="overview-title" data-test-title>
         {{t "general.overview"}}
       </h4>
-      <div class="programyear-overview-actions" data-test-actions>
+      <div class="overview-actions" data-test-actions>
         <LinkTo
           @route="program-year-visualize-objectives"
           @model={{@programYear}}
diff --git a/packages/frontend/app/components/program/overview.gjs b/packages/frontend/app/components/program/overview.gjs
index be682e12cf..2d4c8a4eb5 100644
--- a/packages/frontend/app/components/program/overview.gjs
+++ b/packages/frontend/app/components/program/overview.gjs
@@ -63,12 +63,14 @@ export default class ProgramOverviewComponent extends Component {
     this.duration = Number(ev.target.value);
   }
   <template>
-    <div class="program-overview" data-test-program-overview ...attributes>
-      <h2>
-        {{t "general.overview"}}
-      </h2>
-      <div class="program-overview-content">
-        <div class="block programtitleshort" data-test-short-title>
+    <div class="ilios-overview program-overview" data-test-program-overview ...attributes>
+      <div class="overview-header">
+        <h2 class="overview-title">
+          {{t "general.overview"}}
+        </h2>
+      </div>
+      <div class="overview-content">
+        <div class="overview-block" data-test-short-title>
           <label for={{concat this.id "short-title"}}>
             {{t "general.programTitleShort"}}:
           </label>
@@ -101,7 +103,7 @@ export default class ProgramOverviewComponent extends Component {
             {{/if}}
           </span>
         </div>
-        <div class="block programduration" data-test-duration>
+        <div class="overview-block" data-test-duration>
           <label for={{concat this.id "duration"}}>
             {{t "general.durationInYears"}}:
           </label>
diff --git a/packages/frontend/app/styles/components/learner-group/members.scss b/packages/frontend/app/styles/components/learner-group/members.scss
index eadb095593..bf0a7dec6e 100644
--- a/packages/frontend/app/styles/components/learner-group/members.scss
+++ b/packages/frontend/app/styles/components/learner-group/members.scss
@@ -4,6 +4,7 @@
   @include m.detail-container(var(--blue));
   border-bottom: 0;
   display: grid;
+  grid-column: 1 / -1;
   grid-template-columns: 3fr 1fr;
   padding: 0;
 
diff --git a/packages/frontend/app/styles/components/learner-group/root.scss b/packages/frontend/app/styles/components/learner-group/root.scss
index e1a58a9069..6c2a4bebcf 100644
--- a/packages/frontend/app/styles/components/learner-group/root.scss
+++ b/packages/frontend/app/styles/components/learner-group/root.scss
@@ -4,21 +4,10 @@
 
 .learner-group-root {
   .learner-group-overview {
-    @include m.ilios-overview(var(--orange));
-    padding: 0;
-
-    .block {
-      @include m.ilios-overview-block;
-
-      &.defaulturl {
-        padding-bottom: 0.5rem;
-      }
-    }
-
     .learner-group-overview-actions {
       padding: 0.5rem 0;
-      @include m.detail-container-header;
 
+      @include m.detail-container-header;
       .title {
         @include m.detail-container-title;
       }
@@ -39,10 +28,6 @@
         }
       }
     }
-
-    .learner-group-overview-content {
-      border-bottom: 1px dotted var(--orange);
-    }
   }
 
   .cohortmembers {
diff --git a/packages/frontend/app/styles/components/program-overview.scss b/packages/frontend/app/styles/components/program-overview.scss
index ad23eb1f69..a08954494e 100644
--- a/packages/frontend/app/styles/components/program-overview.scss
+++ b/packages/frontend/app/styles/components/program-overview.scss
@@ -1,20 +1,5 @@
 @use "../ilios-common/mixins" as m;
 
 .program-overview {
-  @include m.ilios-overview(var(--lightest-grey));
-
-  h2 {
-    margin-top: 0.5rem;
-    @include m.ilios-overview-title;
-  }
-
-  .program-overview-content {
-    @include m.ilios-overview-content {
-      padding-top: 0.5rem;
-    }
-
-    .block {
-      @include m.ilios-overview-block;
-    }
-  }
+  border-bottom: 1px dotted var(--lightest-grey);
 }
diff --git a/packages/frontend/app/styles/components/programyear-overview.scss b/packages/frontend/app/styles/components/programyear-overview.scss
index 6119f54643..5ace9a3561 100644
--- a/packages/frontend/app/styles/components/programyear-overview.scss
+++ b/packages/frontend/app/styles/components/programyear-overview.scss
@@ -1,28 +1,16 @@
 @use "../ilios-common/mixins" as m;
-@use "../ilios-common/constants";
 
 .programyear-overview {
-  @include m.ilios-overview(var(--orange));
   background: var(--white);
   border-top: 1px dotted var(--orange);
   border-bottom: 0;
   margin: 0 0.5rem;
   padding: 0 0 1rem 0;
 
-  .programyear-overview-header {
-    @include m.ilios-overview-header;
-
-    h4 {
-      @include m.ilios-overview-title;
-    }
-
-    .programyear-overview-actions {
-      @include m.ilios-overview-actions;
-
-      a {
-        color: var(--light-blue);
-        @include m.font-size("medium");
-      }
+  .actions {
+    a {
+      color: var(--light-blue);
+      @include m.font-size("medium");
     }
   }
 }
diff --git a/packages/ilios-common/addon/components/course/loading.gjs b/packages/ilios-common/addon/components/course/loading.gjs
index 44e9c9b8e1..573fd565b1 100644
--- a/packages/ilios-common/addon/components/course/loading.gjs
+++ b/packages/ilios-common/addon/components/course/loading.gjs
@@ -11,30 +11,30 @@ import { faSquarePlus } from '@fortawesome/free-solid-svg-icons';
       <div class="header">
         <span class="title loading-text">&nbsp;</span>
       </div>
-      <div class="overview">
-        <div class="course-overview-header">
-          <div class="title loading-text">
+      <div class="ilios-overview">
+        <div class="overview-header">
+          <div class="overview-title loading-text">
             {{t "general.overview"}}
           </div>
-          <div class="course-overview-actions"></div>
+          <div class="overview-actions"></div>
         </div>
-        <div class="course-overview-content">
-          <div class="block">
+        <div class="overview-content">
+          <div class="overview-block">
             <label>{{t "general.externalId"}}:</label>
           </div>
-          <div class="block">
+          <div class="overview-block">
             <label>{{t "general.clerkshipType"}}:</label>
           </div>
-          <div class="block">
+          <div class="overview-block">
             <label>{{t "general.start"}}:</label>
           </div>
-          <div class="block">
+          <div class="overview-block">
             <label>{{t "general.end"}}:</label>
           </div>
-          <div class="block">
+          <div class="overview-block">
             <label>{{t "general.level"}}:</label>
           </div>
-          <div class="block">
+          <div class="overview-block">
             <label>{{t "general.universalLocator"}}:</label>
           </div>
         </div>
diff --git a/packages/ilios-common/addon/components/course/overview.gjs b/packages/ilios-common/addon/components/course/overview.gjs
index 0eb7c52ba2..42c69a9031 100644
--- a/packages/ilios-common/addon/components/course/overview.gjs
+++ b/packages/ilios-common/addon/components/course/overview.gjs
@@ -234,13 +234,13 @@ export default class CourseOverview extends Component {
     this.level = this.args.course.level;
   }
   <template>
-    <section class="course-overview" data-test-course-overview>
+    <section class="ilios-overview" data-test-course-overview>
       {{#let (uniqueId) as |templateId|}}
-        <div class="course-overview-header">
-          <div class="title">
+        <div class="overview-header">
+          <div class="overview-title">
             {{t "general.overview"}}
           </div>
-          <div class="course-overview-actions">
+          <div class="overview-actions">
             <LinkTo
               @route="course-materials"
               @model={{@course}}
@@ -277,8 +277,8 @@ export default class CourseOverview extends Component {
             </LinkTo>
           </div>
         </div>
-        <div class="course-overview-content">
-          <div class="block courseexternalid">
+        <div class="overview-content">
+          <div class="overview-block courseexternalid">
             <label for="external-id-{{templateId}}">{{t "general.externalId"}}:</label>
             <span>
               {{#if @editable}}
@@ -308,7 +308,7 @@ export default class CourseOverview extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block clerkshiptype">
+          <div class="overview-block clerkshiptype">
             <label for="clerkship-type-{{templateId}}">{{t "general.clerkshipType"}}:</label>
             <span>
               {{#if @editable}}
@@ -342,7 +342,7 @@ export default class CourseOverview extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block coursestartdate">
+          <div class="overview-block coursestartdate">
             <label>{{t "general.startDate"}}:</label>
             <span>
               {{#if @editable}}
@@ -374,7 +374,7 @@ export default class CourseOverview extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block courseenddate">
+          <div class="overview-block courseenddate">
             <label>{{t "general.endDate"}}:</label>
             <span>
               {{#if @editable}}
@@ -401,7 +401,7 @@ export default class CourseOverview extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block courselevel">
+          <div class="overview-block courselevel">
             <label for="level-{{templateId}}">{{t "general.level"}}:</label>
             <span>
               {{#if @editable}}
@@ -423,7 +423,7 @@ export default class CourseOverview extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="block">
+          <div class="overview-block">
             <label>{{t "general.universalLocator"}}:</label>
             <span class="universallocator">
               <strong>
diff --git a/packages/ilios-common/addon/components/course/summary-header.gjs b/packages/ilios-common/addon/components/course/summary-header.gjs
index 9e7259ac2a..2e6f151cbc 100644
--- a/packages/ilios-common/addon/components/course/summary-header.gjs
+++ b/packages/ilios-common/addon/components/course/summary-header.gjs
@@ -30,12 +30,12 @@ export default class CourseSummaryHeaderComponent extends Component {
     return this.permissionChecker.canCreateCourse(school);
   }
   <template>
-    <div class="course-summary-header" data-test-course-summary-header ...attributes>
-      <div class="course-summary-header-top">
-        <h2 data-test-title>
+    <div class="ilios-overview course-summary-header" data-test-course-summary-header ...attributes>
+      <div class="overview-header">
+        <h2 class="overview-title" data-test-title>
           {{@course.title}}
         </h2>
-        <div class="course-summary-actions" data-test-actions>
+        <div class="overview-actions" data-test-actions>
           <LinkTo
             @route="print-course"
             @model={{@course}}
@@ -56,8 +56,8 @@ export default class CourseSummaryHeaderComponent extends Component {
           {{/if}}
         </div>
       </div>
-      <div class="course-summary-content">
-        <div class="block" data-test-start>
+      <div class="overview-content">
+        <div class="overview-block" data-test-start>
           <label>
             {{t "general.startDate"}}:
           </label>
@@ -65,7 +65,7 @@ export default class CourseSummaryHeaderComponent extends Component {
             {{formatDate @course.startDate day="2-digit" month="2-digit" year="numeric"}}
           </span>
         </div>
-        <div class="block" data-test-external-id>
+        <div class="overview-block" data-test-external-id>
           <label>
             {{t "general.externalId"}}:
           </label>
@@ -73,7 +73,7 @@ export default class CourseSummaryHeaderComponent extends Component {
             {{@course.externalId}}
           </span>
         </div>
-        <div class="block" data-test-end>
+        <div class="overview-block" data-test-end>
           <label>
             {{t "general.endDate"}}:
           </label>
@@ -81,7 +81,7 @@ export default class CourseSummaryHeaderComponent extends Component {
             {{formatDate @course.endDate day="2-digit" month="2-digit" year="numeric"}}
           </span>
         </div>
-        <div class="block" data-test-level>
+        <div class="overview-block" data-test-level>
           <label>
             {{t "general.level"}}:
           </label>
@@ -89,7 +89,7 @@ export default class CourseSummaryHeaderComponent extends Component {
             {{@course.level}}
           </span>
         </div>
-        <div class="block" data-test-status>
+        <div class="overview-block" data-test-status>
           <label>
             {{t "general.publicationStatus"}}:
           </label>
diff --git a/packages/ilios-common/addon/components/session/ilm.gjs b/packages/ilios-common/addon/components/session/ilm.gjs
index cbbf4d0822..133d323383 100644
--- a/packages/ilios-common/addon/components/session/ilm.gjs
+++ b/packages/ilios-common/addon/components/session/ilm.gjs
@@ -92,7 +92,7 @@ export default class SessionIlmComponent extends Component {
     this.localHours = undefined;
   };
   <template>
-    <div class="session-ilm block" data-test-session-ilm>
+    <div class="session-ilm" data-test-session-ilm>
       <label>{{t "general.independentLearning"}}:</label>
       <span class="ilm-value" data-test-ilm-value>
         {{#if @editable}}
@@ -111,7 +111,7 @@ export default class SessionIlmComponent extends Component {
       </span>
     </div>
     {{#if this.isIndependentLearning}}
-      <div class="hours block" data-test-ilm-hours>
+      <div class="overview-block hours" data-test-ilm-hours>
         <label for="hours-{{this.uniqueId}}">{{t "general.hours"}}:</label>
         <span>
           {{#if @editable}}
@@ -145,7 +145,7 @@ export default class SessionIlmComponent extends Component {
         <SessionOverviewIlmDuedate
           @ilmSession={{this.ilmSession}}
           @editable={{@editable}}
-          class="block"
+          class="overview-block"
         />
       {{/unless}}
     {{/if}}
diff --git a/packages/ilios-common/addon/components/session/overview.gjs b/packages/ilios-common/addon/components/session/overview.gjs
index 7625c4d437..025685167b 100644
--- a/packages/ilios-common/addon/components/session/overview.gjs
+++ b/packages/ilios-common/addon/components/session/overview.gjs
@@ -378,7 +378,7 @@ export default class SessionOverview extends Component {
         {{#if this.isLoaded}}
           <Header @session={{@session}} @editable={{@editable}} @hideCheckLink={{@hideCheckLink}} />
 
-          <section class="session-overview">
+          <section class="ilios-overview session-overview">
             <div class="last-update" data-test-last-update>
               <FaIcon @icon={{faClockRotateLeft}} @title={{t "general.lastUpdate"}} />
               {{t "general.lastUpdate"}}:
@@ -392,13 +392,13 @@ export default class SessionOverview extends Component {
               }}
             </div>
 
-            <div class="session-overview-header">
+            <div class="overview-header">
 
-              <div class="title">
+              <div class="overview-title">
                 {{t "general.overview"}}
               </div>
 
-              <div class="session-overview-actions">
+              <div class="overview-actions">
                 {{#if this.showCopy}}
                   <LinkTo
                     @route="session.copy"
@@ -413,8 +413,8 @@ export default class SessionOverview extends Component {
               </div>
             </div>
 
-            <div class="session-overview-content">
-              <div class="sessiontype block" data-test-session-type>
+            <div class="overview-content">
+              <div class="overview-block sessiontype" data-test-session-type>
                 <label for="session-type-{{templateId}}">{{t "general.sessionType"}}:</label>
                 <span>
                   {{#if @editable}}
@@ -500,7 +500,7 @@ export default class SessionOverview extends Component {
                 {{/if}}
               </fieldset>
               <Ilm @session={{@session}} @editable={{@editable}} />
-              <div class="postrequisite block" data-test-postrequisite>
+              <div class="postrequisite" data-test-postrequisite>
                 {{#if @editable}}
                   {{#if this.isEditingPostRequisite}}
                     <PostrequisiteEditor
@@ -555,7 +555,7 @@ export default class SessionOverview extends Component {
                   {{/if}}
                 {{/if}}
               </div>
-              <div class="prerequisites block" data-test-prerequisites>
+              <div class="prerequisites" data-test-prerequisites>
                 <label>{{t "general.prerequisites"}}:</label>
                 {{#if @session.hasPrerequisites}}
                   <span>
diff --git a/packages/ilios-common/app/styles/ilios-common/components/course/loading.scss b/packages/ilios-common/app/styles/ilios-common/components/course/loading.scss
index 1dfa49d601..a62cca2043 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/course/loading.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/course/loading.scss
@@ -6,8 +6,14 @@
   .header {
     @include m.course-header;
   }
-  .overview {
-    @include m.course-overview;
+  .ilios-overview {
+    padding: 0.5rem 0;
+
+    .overview-header {
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 }
 
diff --git a/packages/ilios-common/app/styles/ilios-common/components/course/overview.scss b/packages/ilios-common/app/styles/ilios-common/components/course/overview.scss
index 71858cdfad..4643cda7a3 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/course/overview.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/course/overview.scss
@@ -1,7 +1,7 @@
 @use "../../mixins" as m;
 
 .course-overview {
-  @include m.course-overview;
+  @include m.ilios-form-error;
 
   .courseexternalid {
     input {
@@ -10,7 +10,7 @@
     }
   }
 
-  .block {
+  .overview-block {
     align-items: center;
   }
 
diff --git a/packages/ilios-common/app/styles/ilios-common/components/course/summary-header.scss b/packages/ilios-common/app/styles/ilios-common/components/course/summary-header.scss
index e183db2189..aa50a6fe45 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/course/summary-header.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/course/summary-header.scss
@@ -1,34 +1,19 @@
 @use "../../mixins" as m;
 
 .course-summary-header {
-  @include m.ilios-overview();
   padding-left: 0.8rem;
 
-  .course-summary-header-top {
-    @include m.ilios-overview-header;
-
-    h2 {
-      @include m.ilios-overview-title;
-      @include m.ilios-heading-h3;
-    }
-
-    .course-summary-actions {
-      @include m.ilios-overview-actions;
-      margin-top: 0;
-      text-align: right;
-
-      a {
-        @include m.font-size("medium");
-        margin-right: 0.5rem;
-      }
-    }
+  h2.overview-title {
+    @include m.ilios-heading-h3;
   }
 
-  .course-summary-content {
-    @include m.ilios-overview-content;
+  .overview-actions {
+    margin-top: 0;
+    text-align: right;
 
-    .block {
-      @include m.ilios-overview-block;
+    a {
+      @include m.font-size("medium");
+      margin-right: 0.5rem;
     }
   }
 }
diff --git a/packages/ilios-common/app/styles/ilios-common/components/session-overview.scss b/packages/ilios-common/app/styles/ilios-common/components/session-overview.scss
index 32a22b9e26..df95441b19 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/session-overview.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/session-overview.scss
@@ -31,7 +31,7 @@
 }
 
 .session-overview {
-  @include m.ilios-overview(var(--orange));
+  padding: 0.5rem 0;
 
   .last-update {
     color: var(--grey);
@@ -39,27 +39,12 @@
     text-align: right;
   }
 
-  .session-overview-header {
-    @include m.ilios-overview-header;
+  .overview-header {
     padding-left: 0.5rem;
-
-    .title {
-      @include m.ilios-overview-title;
-    }
-
-    .session-overview-actions {
-      @include m.ilios-overview-actions;
-
-      a {
-        @include m.font-size("medium");
-        margin-right: 0.5rem;
-      }
-    }
   }
 
-  .session-overview-content {
+  .overview-content {
     padding-left: 0.5rem;
-    @include m.ilios-overview-content;
 
     .session-attributes {
       @include m.ilios-fieldset;
@@ -90,10 +75,6 @@
     }
   }
 
-  .block {
-    @include m.ilios-overview-block;
-  }
-
   .sessiontype {
     grid-column: 1 / -1;
 
@@ -122,6 +103,7 @@
   .sessiondescription,
   .instructional-notes {
     grid-column: 1 / -1;
+    display: block;
   }
 
   .sessionassociatedgroups {
diff --git a/packages/ilios-common/app/styles/ilios-common/mixins.scss b/packages/ilios-common/app/styles/ilios-common/mixins.scss
index 5537398e50..cd53d18617 100644
--- a/packages/ilios-common/app/styles/ilios-common/mixins.scss
+++ b/packages/ilios-common/app/styles/ilios-common/mixins.scss
@@ -15,4 +15,3 @@
 @forward "mixins/main-list";
 @forward "mixins/objectives";
 @forward "mixins/course/header";
-@forward "mixins/course/overview";
diff --git a/packages/ilios-common/app/styles/ilios-common/mixins/course/overview.scss b/packages/ilios-common/app/styles/ilios-common/mixins/course/overview.scss
deleted file mode 100644
index f1b3bec099..0000000000
--- a/packages/ilios-common/app/styles/ilios-common/mixins/course/overview.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@use "../font-size";
-@use "../ilios-overview";
-@use "../ilios-form";
-
-@mixin course-overview() {
-  @include ilios-overview.ilios-overview(var(--orange));
-  padding: 0.5rem 0;
-  @include ilios-form.ilios-form-error;
-
-  .title {
-    @include ilios-overview.ilios-overview-title;
-  }
-
-  .course-overview-header {
-    @include ilios-overview.ilios-overview-header;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .course-overview-actions {
-    @include ilios-overview.ilios-overview-actions;
-
-    span {
-      color: var(--light-blue);
-    }
-
-    a,
-    span {
-      @include font-size.font-size("medium");
-      margin-right: 0.5rem;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .block {
-    @include ilios-overview.ilios-overview-block;
-  }
-
-  .course-overview-content {
-    @include ilios-overview.ilios-overview-content;
-  }
-}
diff --git a/packages/ilios-common/app/styles/ilios-common/shared.scss b/packages/ilios-common/app/styles/ilios-common/shared.scss
index 4683ff9571..ff31f84be2 100644
--- a/packages/ilios-common/app/styles/ilios-common/shared.scss
+++ b/packages/ilios-common/app/styles/ilios-common/shared.scss
@@ -3,6 +3,7 @@
 @forward "shared/data-visualization";
 @forward "shared/graph-with-data-table";
 @forward "shared/icons";
+@forward "shared/ilios-overview";
 @forward "shared/ilios-removable-table";
 @forward "shared/ilios-table";
 @forward "shared/ilios-table-colors";
diff --git a/packages/ilios-common/app/styles/ilios-common/shared/ilios-overview.scss b/packages/ilios-common/app/styles/ilios-common/shared/ilios-overview.scss
new file mode 100644
index 0000000000..39f99f3fcf
--- /dev/null
+++ b/packages/ilios-common/app/styles/ilios-common/shared/ilios-overview.scss
@@ -0,0 +1,63 @@
+@use "../mixins/font-size";
+@use "../mixins/ilios-form";
+@use "../mixins/media";
+
+.ilios-overview {
+  border-bottom: 1px dotted var(--orange);
+  display: block;
+
+  .overview-header,
+  .overview-actions {
+    align-items: baseline;
+    display: flex;
+  }
+
+  .overview-header {
+    justify-content: space-between;
+    margin-top: 1rem;
+    height: 1.5em;
+  }
+
+  .overview-actions {
+    justify-content: space-around;
+    text-align: right;
+    vertical-align: middle;
+
+    a {
+      @include font-size.font-size("medium");
+      margin-right: 0.5rem;
+    }
+  }
+
+  .overview-title {
+    color: var(--black);
+    @include font-size.font-size("base");
+    font-weight: 600;
+  }
+
+  .overview-content {
+    align-items: center;
+    display: grid;
+    padding-bottom: 0.5rem;
+
+    @include media.for-tablet-and-up {
+      row-gap: 0.5rem;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
+
+    @include media.for-laptop-and-up {
+      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    }
+  }
+
+  label {
+    @include ilios-form.ilios-label;
+    margin: 0 0.5rem 0 0;
+  }
+
+  .overview-block {
+    align-items: flex-end;
+    display: flex;
+    min-height: 1.5rem;
+  }
+}

From 3b7829b42d9ac35d31c72fa1d20df4121b1e918c Mon Sep 17 00:00:00 2001
From: Jonathan Johnson <jon.johnson@ucsf.edu>
Date: Fri, 6 Mar 2026 11:36:15 -0800
Subject: [PATCH 2/3] Use Page Selector to Find Titles

---
 .../ilios-common/page-objects/components/course/details.js      | 2 +-
 packages/ilios-common/addon/components/course/overview.gjs      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/details.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/details.js
index c410448e7b..7f903e638d 100644
--- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/details.js
+++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/details.js
@@ -14,7 +14,7 @@ import detailCohorts from './../detail-cohorts';
 export default create({
   scope: '[data-test-ilios-course-details]',
   collapseControl: clickable('[data-test-expand-course-details]'),
-  titles: count('.title'),
+  titles: count('[data-test-title]'),
   header,
   overview,
   leadershipCollapsed,
diff --git a/packages/ilios-common/addon/components/course/overview.gjs b/packages/ilios-common/addon/components/course/overview.gjs
index 42c69a9031..7a8f1e265b 100644
--- a/packages/ilios-common/addon/components/course/overview.gjs
+++ b/packages/ilios-common/addon/components/course/overview.gjs
@@ -237,7 +237,7 @@ export default class CourseOverview extends Component {
     <section class="ilios-overview" data-test-course-overview>
       {{#let (uniqueId) as |templateId|}}
         <div class="overview-header">
-          <div class="overview-title">
+          <div class="overview-title" data-test-title>
             {{t "general.overview"}}
           </div>
           <div class="overview-actions">

From 887d6dd7c33361ddaee37a6521cec26d292e4a39 Mon Sep 17 00:00:00 2001
From: Jonathan Johnson <jon.johnson@ucsf.edu>
Date: Mon, 9 Mar 2026 14:24:27 -0700
Subject: [PATCH 3/3] Style Learner Group Alone

Instead of trying to fit this into the ilios-overview styles we can just
treat it as it's own unique thing. Which it is.
---
 .../app/components/learner-group/root.gjs     | 58 +++++++++----------
 .../learner-group/course-associations.scss    |  1 +
 .../styles/components/learner-group/root.scss | 38 +++++++++++-
 3 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/packages/frontend/app/components/learner-group/root.gjs b/packages/frontend/app/components/learner-group/root.gjs
index 48e98a1539..302dc908e6 100644
--- a/packages/frontend/app/components/learner-group/root.gjs
+++ b/packages/frontend/app/components/learner-group/root.gjs
@@ -487,8 +487,8 @@ export default class LearnerGroupRootComponent extends Component {
           @sortUsersBy={{this.sortUsersBy}}
           @canUpdate={{@canUpdate}}
         />
-        <section class="ilios-overview learner-group-overview" data-test-overview>
-          <div class="overview-block" data-test-needs-accommodation>
+        <section class="learner-group-overview" data-test-overview>
+          <div class="block accommodation-reqired" data-test-needs-accommodation>
             <label>{{t "general.accommodationIsRequiredForLearnersInThisGroup"}}:</label>
             <span>
               {{#if @canUpdate}}
@@ -505,7 +505,7 @@ export default class LearnerGroupRootComponent extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="overview-block" data-test-location>
+          <div class="block" data-test-location>
             <label for="location-{{templateId}}">
               {{t "general.defaultLocation"}}:
             </label>
@@ -538,7 +538,7 @@ export default class LearnerGroupRootComponent extends Component {
               {{/if}}
             </span>
           </div>
-          <div class="overview-block defaulturl" data-test-url>
+          <div class="block defaulturl" data-test-url>
             <label for="link-{{templateId}}">
               {{t "general.defaultVirtualLearningLink"}}:
             </label>
@@ -609,7 +609,7 @@ export default class LearnerGroupRootComponent extends Component {
                 ({{this.usersForMembersList.length}})
               {{/if}}
             </div>
-            <span class="actions" data-test-buttons>
+            <div class="actions" data-test-buttons>
               <input
                 type="text"
                 value={{this.filter}}
@@ -653,7 +653,7 @@ export default class LearnerGroupRootComponent extends Component {
                   </button>
                 {{/if}}
               {{/if}}
-            </span>
+            </div>
           </div>
           {{#if @isBulkAssigning}}
             <BulkAssignment
@@ -661,35 +661,31 @@ export default class LearnerGroupRootComponent extends Component {
               @done={{fn @setIsBulkAssigning false}}
             />
           {{else if @isEditing}}
-            <div class="overview-content">
-              <UserManager
-                @filter={{this.filter}}
-                @learnerGroupId={{this.learnerGroupId}}
-                @learnerGroupTitle={{this.learnerGroupTitle}}
-                @topLevelGroupTitle={{this.topLevelGroupTitle}}
-                @cohortTitle={{this.cohortTitle}}
-                @users={{this.usersForUserManager}}
-                @sortBy={{this.sortUsersBy}}
-                @setSortBy={{@setSortUsersBy}}
-                @addUserToGroup={{perform this.addUserToGroup}}
-                @removeUserFromGroup={{perform this.removeUserToCohort}}
-                @addUsersToGroup={{perform this.addUsersToGroup}}
-                @removeUsersFromGroup={{perform this.removeUsersToCohort}}
-              />
-            </div>
+            <UserManager
+              @filter={{this.filter}}
+              @learnerGroupId={{this.learnerGroupId}}
+              @learnerGroupTitle={{this.learnerGroupTitle}}
+              @topLevelGroupTitle={{this.topLevelGroupTitle}}
+              @cohortTitle={{this.cohortTitle}}
+              @users={{this.usersForUserManager}}
+              @sortBy={{this.sortUsersBy}}
+              @setSortBy={{@setSortUsersBy}}
+              @addUserToGroup={{perform this.addUserToGroup}}
+              @removeUserFromGroup={{perform this.removeUserToCohort}}
+              @addUsersToGroup={{perform this.addUsersToGroup}}
+              @removeUsersFromGroup={{perform this.removeUsersToCohort}}
+            />
           {{else}}
             {{#if @showCalendar}}
               <Calendar @learnerGroup={{@learnerGroup}} />
             {{/if}}
-            <div class="overview-content">
-              <Members
-                @filter={{this.filter}}
-                @learnerGroupId={{this.learnerGroupId}}
-                @setSortBy={{@setSortUsersBy}}
-                @sortBy={{this.sortUsersBy}}
-                @users={{this.usersForMembersList}}
-              />
-            </div>
+            <Members
+              @filter={{this.filter}}
+              @learnerGroupId={{this.learnerGroupId}}
+              @setSortBy={{@setSortUsersBy}}
+              @sortBy={{this.sortUsersBy}}
+              @users={{this.usersForMembersList}}
+            />
           {{/if}}
           <section class="subgroups" data-test-subgroups>
             <div class="header">
diff --git a/packages/frontend/app/styles/components/learner-group/course-associations.scss b/packages/frontend/app/styles/components/learner-group/course-associations.scss
index cc91d5786e..23a63fc249 100644
--- a/packages/frontend/app/styles/components/learner-group/course-associations.scss
+++ b/packages/frontend/app/styles/components/learner-group/course-associations.scss
@@ -2,6 +2,7 @@
 
 .learner-group-course-associations {
   border-top: 1px dotted (var(--orange));
+  margin-top: 0.5rem;
   @include m.detail-container-content;
 
   .header {
diff --git a/packages/frontend/app/styles/components/learner-group/root.scss b/packages/frontend/app/styles/components/learner-group/root.scss
index 6c2a4bebcf..adddfc76a2 100644
--- a/packages/frontend/app/styles/components/learner-group/root.scss
+++ b/packages/frontend/app/styles/components/learner-group/root.scss
@@ -4,15 +4,49 @@
 
 .learner-group-root {
   .learner-group-overview {
+    margin-top: 0.5rem;
+    .block {
+      display: flex;
+      align-items: flex-start;
+
+      label {
+        @include m.ilios-label;
+        margin: 0 0.5rem 0 0;
+      }
+
+      &.accommodation-reqired {
+        margin-bottom: 0.5rem;
+      }
+    }
+
     .learner-group-overview-actions {
-      padding: 0.5rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      @include m.for-tablet-and-up {
+        flex-direction: row;
+        justify-content: space-between;
+      }
 
-      @include m.detail-container-header;
       .title {
+        @include m.detail-container-header;
         @include m.detail-container-title;
       }
 
       .actions {
+        display: flex;
+        padding: 0.5rem 0;
+        align-items: center;
+        vertical-align: middle;
+        gap: 0.5rem;
+        flex-direction: column;
+
+        @include m.for-tablet-and-up {
+          flex-direction: row;
+          justify-content: space-between;
+        }
+
         .multi-button {
           display: inline-flex;