Fix elements moving on focus in lecture/course listing

src/components/CourseListing.tsx

@@ -283,7 +283,7 @@ export function LectureListItem({
 
     return (
         <li
-            className={`list-group-item lecture-list-item ${lecture.no_recording ? "text-muted" : ""}`}
+            className={`list-group-item highlighting-list-item ${lecture.no_recording ? "text-muted" : ""}`}
             id={`lecture-${lecture.id}`}
             {...props}
         >

src/pages/courses.tsx

@@ -36,7 +36,7 @@ export function CourseItem({
 
     return (
         <li
-            className={"list-group-item list-group-item-condensed course-list-item d-flex " + color}
+            className={"list-group-item list-group-item-condensed highlighting-list-item d-flex " + color}
             id={`course-${course.id}`}
             {...props}
         >

src/styles/globals.scss

@@ -234,12 +234,16 @@ $link-decoration: none;
 
 @import url(videojs-markers.css);
 
-.lecture-list-item:focus-within {
-	border: 2px solid var(--bs-primary);
+.highlighting-list-item:not(:focus-within) {
+	padding: calc(var(--bs-list-group-item-padding-y) + 1px) calc(var(--bs-list-group-item-padding-x) + 1px);
 }
 
-.course-list-item:focus-within {
-	border: 2px solid var(--bs-primary);
+.highlighting-list-item + .highlighting-list-item:not(:focus-within) {
+	border-top: var(--bs-list-group-border-width) solid rgba(0, 0, 0, 0);
+}
+
+.highlighting-list-item:focus-within {
+	border: calc(var(--bs-list-group-border-width) + 1px) solid var(--bs-primary);
 }
 
 @media (min-height: 768px) {