@asd20/ui-next 2.21.7 → 2.21.9

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.21.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.8...ui-next-v2.21.9) (2026-08-27)
+
+## [2.21.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.7...ui-next-v2.21.8) (2026-08-26)
+
 ## [2.21.7](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.6...ui-next-v2.21.7) (2026-08-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.21.7",
+  "version": "2.21.9",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/organisms/Asd20PersonModal/index.vue

@@ -10,14 +10,19 @@
   >
     <header class="asd20-person-modal__header">
       <div class="asd20-person-modal__photo">
-        <div class="photo">
+        <div
+          v-if="person.thumbnailUrl"
+          class="photo"
+        >
           <img
-            v-if="person.thumbnailUrl"
             :src="person.thumbnailUrl"
             :alt="person.displayName"
           />
         </div>
-        <div class="initials">
+        <div
+          v-else
+          class="initials"
+        >
           {{ initials }}
         </div>
       </div>
@@ -61,12 +66,10 @@
           icon="email"
           icon-size="lg"
           label="Email"
-          :description="
-            `<a href='mailto:${person.email.replace(
-              'mailto:',
-              ''
-            )}'>${person.email.replace('mailto:', '')}</a>`
-          "
+          :description="`<a href='mailto:${person.email.replace(
+            'mailto:',
+            ''
+          )}'>${person.email.replace('mailto:', '')}</a>`"
         />
 
         <Asd20ListItem
@@ -74,9 +77,7 @@
           icon="phone-alt"
           icon-size="lg"
           label="Phone"
-          :description="
-            `<a href='tel:${person.workPhone}'>${person.workPhone}</a>`
-          "
+          :description="`<a href='tel:${person.workPhone}'>${person.workPhone}</a>`"
         />
         <div
           v-show="person.biography"
@@ -125,9 +126,12 @@ export default {
     initials() {
       if (!this.person.displayName) return ''
       return this.person.displayName
-        .split(' ')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
         .map(n => n[0])
         .join('')
+        .slice(0, 3)
     },
     useEmailForm() {
       return (

package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue

@@ -141,7 +141,7 @@ export default {
     top: 0;
     bottom: space(0.5);
     left: 0;
-    right: 3rem;
+    right: 2rem;
     z-index: -1;
     background: var(--website-header__background-style);
     background-color: var(--website-header__background-color);
@@ -208,7 +208,8 @@ export default {
 
   &__content {
     margin-top: space(3);
-    background: var(--website-header__background-color);
+    width: 90%;
+    // background: var(--website-header__background-color);
   }
 
   &__lead {
@@ -310,7 +311,7 @@ $max: 4rem;
 @media (min-width: 667px) {
   .asd20-school-homepage-header {
     &::before {
-      right: space(3);
+      right: 2rem;
       bottom: space(2);
     }
     &__top {
@@ -342,8 +343,20 @@ $max: 4rem;
 @media (min-width: 1024px) {
   .asd20-school-homepage-header {
     display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
+    grid-template-columns:
+      [full-start] space(3)
+      [content-start] minmax(0, 1fr) [content-end]
+      space(3)
+      [media-start] minmax(0, 1.15fr) [media-end]
+      space(3) [full-end];
+    grid-template-rows:
+      [top-start] space(5)
+      [media-start] space(1)
+      [top-end hero-start] space(3)
+      [content-start] minmax(0, 1fr) [content-end]
+      space(3)
+      [actions-start] auto [media-end]
+      space(2) [full-end];
     margin-bottom: 0;
     &::before {
       content: '';
@@ -353,8 +366,8 @@ $max: 4rem;
       bottom: auto;
       left: auto;
       right: auto;
-      grid-column: 1 / -1;
-      grid-row: 7 / -4;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / actions-start;
       z-index: 1;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -371,8 +384,8 @@ $max: 4rem;
       left: auto;
       right: auto;
       margin-left: 0;
-      grid-column: 1 / -1;
-      grid-row: 7 / -1;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / full-end;
       background: var(--website-quick-links__background-color);
     }
 
@@ -384,8 +397,8 @@ $max: 4rem;
       position: relative;
       margin: 0;
       padding: space(1) space(1) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
+      grid-column: full-start / full-end;
+      grid-row: top-start / top-end;
       background: transparent;
       justify-content: space-between;
       width: inherit;
@@ -404,8 +417,9 @@ $max: 4rem;
     &__content {
       margin-top: 0;
       position: relative;
-      grid-column: 2 / 6;
-      grid-row: 8 / 9;
+      width: auto;
+      grid-column: content-start / content-end;
+      grid-row: content-start / content-end;
     }
 
     h1 {
@@ -419,8 +433,8 @@ $max: 4rem;
     }
 
     &__call-to-action {
-      grid-column: 2 / 6;
-      grid-row-start: 10;
+      grid-column: content-start / content-end;
+      grid-row: actions-start / media-end;
       z-index: 2;
       margin: 0;
       height: min-content;
@@ -442,8 +456,8 @@ $max: 4rem;
       left: auto;
       right: auto;
       top: auto;
-      grid-column: 7 / -2;
-      grid-row: 6 / -3;
+      grid-column: media-start / media-end;
+      grid-row: media-start / media-end;
       z-index: 1;
       height: auto;
       margin: 0;

package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue

@@ -54,43 +54,45 @@
         <!-- Pause icon (⏸) -->
         <span v-else>&#10073;&#10073;</span>
       </button>
-      <div
-        id="main"
-        class="asd20-school-homepage-video-header__content"
-      >
-        <h1
-          v-if="heading"
-          v-html="heading"
-        />
+      <div class="asd20-school-homepage-video-header__text">
         <div
-          v-if="lead"
-          class="asd20-school-homepage-video-header__lead"
+          id="main"
+          class="asd20-school-homepage-video-header__content"
         >
-          <span v-html="lead"></span>
-          <a
-            v-if="detailLink && !isDetailPage"
-            :href="detailLink"
-            @click="onDetailLinkClick"
-          >
-            {{ detailLinkLabel }}
-          </a>
+          <h1
+            v-if="heading"
+            v-html="heading"
+          />
           <div
-            v-if="callsToAction.length > 0"
-            class="asd20-school-homepage-video-header__call-to-action"
+            v-if="lead"
+            class="asd20-school-homepage-video-header__lead"
           >
-            <asd20-button
-              v-for="(cta, index) in callsToAction"
-              :key="index"
-              :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
-              :label="cta.label"
-              :icon="cta.icon"
-              :link="cta.url"
-              reversed
-              horizontal
-              centered
-            />
+            <span v-html="lead"></span>
+            <a
+              v-if="detailLink && !isDetailPage"
+              :href="detailLink"
+              @click="onDetailLinkClick"
+            >
+              {{ detailLinkLabel }}
+            </a>
           </div>
         </div>
+        <div
+          v-if="callsToAction.length > 0"
+          class="asd20-school-homepage-video-header__call-to-action"
+        >
+          <asd20-button
+            v-for="(cta, index) in callsToAction"
+            :key="index"
+            :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+            :label="cta.label"
+            :icon="cta.icon"
+            :link="cta.url"
+            reversed
+            horizontal
+            centered
+          />
+        </div>
       </div>
     </div>
 
@@ -220,16 +222,16 @@ export default {
     display: block;
     position: absolute;
     top: 0;
-    bottom: space(0);
+    bottom: space(0.5);
     left: 0;
-    right: space(1);
+    right: 2rem;
     z-index: -1;
-    background: var(--website-header__background-color)
-      var(--website-header__background-style);
-    border-radius: var(--website-shape__radius-l);
+    background: var(--website-header__background-style);
+    background-color: var(--website-header__background-color);
     border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-top-right-radius: 3rem;
     border-bottom-left-radius: 0;
+    border-bottom-right-radius: 3rem;
   }
   &::after {
     content: '';
@@ -249,14 +251,13 @@ export default {
     --fill-one: rgba(255, 255, 255, 1);
     --fill-two: rgba(255, 255, 255, 0.625);
 
-    position: relative;
+    width: 100%;
+    position: absolute;
     z-index: 101;
-    background: white;
     display: flex;
-    justify-content: space-between;
+    margin-top: space(0.5);
     align-items: center;
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
     & :deep(.asd20-picker) {
       display: none;
     }
@@ -265,38 +266,44 @@ export default {
       margin-left: 1rem;
     }
   }
+  &__text {
+    display: contents;
+  }
   &__content {
-    position: absolute;
-    top: 0;
-    background: rgba(0, 0, 0, 0.4);
-    height: 100%;
-    padding-top: space(3);
+    order: 1;
+    width: 90%;
+    // background: var(--website-header__background-color);
   }
   &__image {
+    display: flex;
+    flex-direction: column;
+    padding-top: space(3);
+
     img {
+      order: 2;
       display: block;
       width: 100%;
-      height: 600px;
-      min-height: 600px;
-      object-fit: cover;
       object-position: center;
     }
   }
 
   h1 {
     position: relative;
-    font-size: 32px !important;
-    color: #ffffff !important;
-    margin: space(2) space(1) space(1) space(1);
+    color: var(--website-header__title-color);
+    @include asd20-font(
+      2,
+      var(--website-typography__font-family-headlines),
+      1.2,
+      700
+    );
+    margin: space(1);
     z-index: 1;
-    border-bottom: 5px solid var(--color__accent);
-    padding-bottom: space(0.5);
   }
 
   &__lead {
     position: relative;
     z-index: 1;
-    color: #f6f6f6 !important;
+    color: var(--website-header__foreground-color);
     @include asd20-font(1, var(--website-typography__font-family-body));
     margin: space(-0.5) space(2) space(1) space(1);
     a {
@@ -305,19 +312,15 @@ export default {
   }
 
   &__call-to-action {
+    order: 3;
+    margin: space(1);
+    z-index: 1;
     display: flex;
     flex-direction: column;
-    left: space(1);
-    z-index: 2;
-    margin: 0;
-    height: min-content;
-    align-self: end;
     .asd20-button {
-      min-width: 95%;
-      border-radius: var(--website-shape__radius-m);
-      margin: space(0.5) 0 0;
       flex-grow: 1;
-      max-width: 100%;
+      width: calc(100% - space(3));
+      margin-bottom: space(0.5);
       font-size: 1rem !important;
       background-color: var(
         --website-header__button-background-color,
@@ -328,7 +331,7 @@ export default {
         var(--color__accent-t100)
       );
       position: relative;
-      padding: space(0.5) space(0.75);
+      padding: space(0.5) space(1.5);
       transition: background-color 0.3s ease;
       z-index: 2;
       overflow: hidden;
@@ -360,6 +363,10 @@ export default {
           background-color: var(--color__accent-t60);
         }
       }
+
+      &:not(:last-child) {
+        margin-bottom: space(0.5);
+      }
     }
   }
   .scroll-down-indicator {
@@ -442,194 +449,57 @@ $max: 4rem;
 }
 @media (min-width: 667px) {
   .asd20-school-homepage-video-header {
+    &::before {
+      right: 2rem;
+      bottom: space(2);
+    }
     &__call-to-action {
+      flex-direction: row;
+      margin: space(1);
       .asd20-button {
-        min-width: 50%;
-        max-width: 50%;
+        flex-grow: 0;
+        width: max-content;
+        min-width: 4rem;
+        margin-bottom: 0 !important;
+        &:not(:last-child) {
+          margin-right: space(0.5);
+        }
       }
     }
     &__top {
       flex-direction: row;
-      justify-content: flex-start;
-      padding: 0 space(1);
       align-items: center !important;
     }
-    &__image {
-      img {
-        display: block;
-        width: 100%;
-        height: 80vh;
-        object-fit: cover;
-        object-position: center;
-      }
-    }
-    h1 {
-      font-size: 40px !important;
-    }
   }
 }
 
-@media (min-width: 1024px) and (max-height: 700px) {
+@media (min-width: 1024px) {
   .asd20-school-homepage-video-header {
     display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
-        3,
-        space(1)
-      );
+    grid-template-columns:
+      [full-start] space(3)
+      [media-start] minmax(0, 1fr) [media-end]
+      space(3) [full-end];
+    grid-template-rows:
+      [top-start] space(5)
+      [media-start] space(1)
+      [top-end hero-start] space(3)
+      [content-start] minmax(0, 1fr) [content-end]
+      space(3)
+      [actions-start] space(1) [media-end]
+      space(2) [full-end];
     margin-bottom: 0;
-    .background-video {
-      display: block;
-      pointer-events: none;
-    }
-    .background-image {
-      display: block;
-    }
-    .hide-background-image {
-      display: none;
-    }
-
-    video {
-      z-index: -1;
-      width: 100%;
-      height: 80vh;
-      object-fit: cover;
-    }
-
-    & :deep(.notification-group--status .notifications) {
-      border-radius: 3rem;
-      padding: 0.37rem;
-    }
-    &::before {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      grid-column: 1 / -1;
-      grid-row: 7 / -4;
-      z-index: 1;
-      /* transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);*/
-      border-radius: var(--website-shape__radius-l);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      margin-left: 0;
-      grid-column: 1 / -1;
-      grid-row: 7 / -1;
-      background: var(--website-quick-links__background-color);
-    }
-
-    & :deep(.asd20-logo + .asd20-breadcrumb) {
-      margin-top: space(2);
-    }
-
-    &__top {
-      margin: 0;
-      padding: space(0.5) space(3) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
-      background: transparent;
-      justify-content: space-between;
-      & :deep(.asd20-picker) {
-        display: flex;
-      }
-    }
-
-    &__content {
-      top: space(1);
-      left: space(1);
-      z-index: 100;
-      width: 60%;
-      min-width: space(15);
-      height: min-content;
-      background: rgba(0, 0, 0, 0.6);
-      padding: space(1);
-      border-left: space(1.5) solid var(--color__accent-t20);
-      animation: slide_left 1s ease-in-out 0.5s both;
-      border-top-left-radius: 2rem;
-      border-bottom-left-radius: 2rem;
-    }
-
-    h1 {
-      margin: 0 0 space(1) 0;
-      font-size: 40px !important;
-      color: var(--color__on-accent);
-      border-bottom: none;
-    }
-
-    &__lead {
-      margin: space(-0.5) 0 0 0;
-      font-size: 20px !important;
-      color: var(--color__on-accent);
-    }
-
-    &__lead + &__call-to-action {
-      margin-top: 0;
-    }
-    &__call-to-action {
-      .asd20-button {
-        min-width: 60%;
-        max-width: 60%;
-      }
-    }
 
-    &__image {
-      display: block;
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 2 / 13;
-      grid-row: 6 / -3;
-      z-index: 1;
-      height: auto;
-      margin: 0;
-      padding: 0;
-      transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
-      border-radius: var(--website-shape__radius-l);
-      overflow: hidden;
-
-      img {
-        display: block;
-        width: 100%;
-        height: 80vh;
-        object-fit: cover;
-        object-position: center;
-        border-radius: var(--website-shape__radius-l);
-      }
-    }
-    .scroll-down-indicator {
+    .background-video,
+    .background-image {
       display: block;
     }
-  }
-}
 
-@media (min-width: 1024px) and (min-height: 700px) {
-  .asd20-school-homepage-video-header {
-    display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
-    margin-bottom: 0;
     .background-video {
-      display: block;
       border-radius: var(--website-shape__radius-l);
       pointer-events: none;
     }
+
     .hide-background-image {
       display: none;
     }
@@ -641,39 +511,25 @@ $max: 4rem;
       object-fit: cover;
     }
 
-    & :deep(.notification-group--status .notifications) {
-      border-radius: 3rem;
-      padding: 0.375rem;
-    }
     &::before {
       content: '';
       display: block;
       position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      grid-column: 1 / -1;
-      grid-row: 7 / -4;
+      inset: auto;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / actions-start;
       z-index: 1;
-      border-radius: var(--website-shape__radius-l);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-radius: 0;
     }
 
     &::after {
       content: '';
       display: block;
       position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
+      inset: auto;
       margin-left: 0;
-      grid-column: 1 / -1;
-      grid-row: 7 / -1;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / full-end;
       background: var(--website-quick-links__background-color);
     }
 
@@ -682,68 +538,88 @@ $max: 4rem;
     }
 
     &__top {
+      position: relative;
+      width: inherit;
       margin: 0;
-      padding: space(0.5) space(3) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
+      padding: space(0.5) space(3) space(1);
+      grid-column: full-start / full-end;
+      grid-row: top-start / top-end;
       background: transparent;
       justify-content: space-between;
+
       & :deep(.asd20-picker) {
         display: flex;
       }
     }
 
-    &__content {
+    &__text {
+      display: block;
+      position: absolute;
       top: 2.6875rem;
       left: -1rem;
       z-index: 100;
       width: 25rem;
-      height: min-content;
-      background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
+      height: 80%;
+      background: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 1) 0%,
+        rgba(0, 0, 0, 0.7) 60%,
+        rgba(0, 0, 0, 0.5) 80%,
+        rgba(0, 0, 0, 0) 100%
+      );
       padding: space(1);
       border-left: space(1.5) solid var(--color__accent-t20);
       animation: slide_left 1s ease-in-out 0.5s both;
-      height: 80%;
       border-top-left-radius: 2rem;
       border-bottom-left-radius: 2rem;
     }
 
+    &__content {
+      width: auto;
+      background: transparent;
+    }
+
     h1 {
-      margin: 0 0 space(1) 0;
+      margin: 0 0 space(1);
       font-size: 40px !important;
       color: var(--color__on-accent);
       border-bottom: none;
     }
 
     &__lead {
-      margin: space(-0.5) 0 0 0;
+      margin: space(-0.5) 0 0;
       font-size: 20px !important;
       color: var(--color__on-accent);
     }
 
-    &__lead + &__call-to-action {
-      margin-top: 0;
-    }
     &__call-to-action {
+      flex-direction: column;
+      margin: 0;
+      height: min-content;
+      align-self: end;
+
       .asd20-button {
+        flex-grow: 1;
+        width: auto;
+        margin: space(0.5) 0 0;
         min-width: 60%;
         max-width: 60%;
+        border-radius: var(--website-shape__radius-m);
+        padding: space(0.5) space(0.75);
       }
     }
 
     &__image {
       display: block;
       position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 2 / 13;
-      grid-row: 6 / -3;
+      inset: auto;
+      grid-column: media-start / media-end;
+      grid-row: media-start / media-end;
       z-index: 1;
       height: auto;
       margin: 0;
       padding: 0;
+      background: transparent;
       transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
       border-radius: var(--website-shape__radius-l);
       overflow: visible;
@@ -757,14 +633,16 @@ $max: 4rem;
         border-radius: var(--website-shape__radius-l);
       }
     }
+
     .scroll-down-indicator {
       display: block;
     }
   }
+
   .video-toggle-btn {
     position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
+    bottom: space(0.5);
+    right: space(0.5);
     background-color: rgba(0, 0, 0, 0.5);
     color: lightgray;
     border: none;
@@ -777,14 +655,35 @@ $max: 4rem;
     font-size: 18px;
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
-  }
 
-  .video-toggle-btn:hover {
-    background-color: rgba(0, 0, 0, 0.7);
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+
+    span {
+      line-height: 1;
+    }
   }
+}
+
+@media (min-width: 1024px) and (max-height: 699px) {
+  .asd20-school-homepage-video-header {
+    & :deep(.notification-group--status .notifications) {
+      padding: 0.37rem;
+    }
+
+    &__text {
+      top: space(1);
+      left: space(1);
+      width: 60%;
+      min-width: space(15);
+      height: min-content;
+      background: rgba(0, 0, 0, 0.6);
+    }
 
-  .video-toggle-btn span {
-    line-height: 1;
+    &__image {
+      overflow: hidden;
+    }
   }
 }
 </style>

package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue

@@ -325,11 +325,9 @@ export default {
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    margin: space(0.25);
     justify-content: flex-end;
-    width: calc(100% - 1rem);
-    position: absolute;
-    top: space(0.25);
+    width: 100%;
+    margin: 0 space(0.5);
     .language-wrapper {
       display: flex;
       flex-direction: row;
@@ -338,7 +336,6 @@ export default {
       flex-wrap: wrap;
       gap: space(0.25);
       width: 100%;
-      margin-bottom: space(0.25);
 
       .ai-search {
         order: 1;
@@ -352,6 +349,11 @@ export default {
 
       .asd20-language-translation {
         order: 3;
+        border-radius: 3rem;
+        & .asd20-select-input {
+          color: currentColor;
+          font-family: Arial, Helvetica, sans-serif;
+        }
       }
       .asd20-notification-group--floating {
         /* position: absolute;*/
@@ -365,20 +367,10 @@ export default {
         background: white;
         border-radius: 3rem;
       }
-      .asd20-language-translation {
-        z-index: 2;
-        border-radius: 3rem;
-        margin: 0 0.05rem;
-        height: 2.75rem;
-        & .asd20-select-input {
-          padding: 0.375rem 0.375rem;
-          color: currentColor;
-          font-family: Arial, Helvetica, sans-serif;
-        }
-      }
     }
     .no-block-widget {
-      top: 0;
+      position: relative;
+      top: unset;
     }
     .asd20-language-loader {
       order: 1;
@@ -417,25 +409,15 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-video-template {
     .notification-translation-container {
-      margin: 0;
+      margin: 0 space(1);
       justify-content: flex-end;
-      position: absolute;
-      right: space(0.5);
-      top: space(0.5);
-      width: auto;
       flex-wrap: nowrap;
       .language-wrapper {
         justify-content: flex-end;
-        margin-bottom: 0;
-        flex-wrap: nowrap;
       }
-      .language-wrapper .ai-search {
-        width: 100%;
-        flex: 1 1 100%;
-        order: 0;
-      }
-      .asd20-notification-group--floating {
-        position: unset;
+      .no-block-widget {
+        position: relative;
+        top: unset;
       }
     }
     .asd20-quicklinks-menu {
@@ -466,8 +448,9 @@ export default {
       }
     }
     .notification-translation-container {
+      position: absolute;
       top: space(5.25);
-      right: space(3.5);
+      right: 3.5rem;
       width: min(34rem, calc(100vw - 8rem));
     }