Fix various cut-off focus outlines

src/app/components/elements/TeacherDashboard.tsx

@@ -164,7 +164,7 @@ const BooksPanel = () => {
                     </Col>)}
         </div>
         <Spacer/>
-        <Link to="/books" className="d-inline panel-link">See all books</Link>
+        <Link to="/books" className="d-inline panel-link mt-2">See all books</Link>
     </div>;
 };
 

src/app/components/elements/list-groups/AbstractListViewItem.tsx

@@ -217,7 +217,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     </div>}
                     {isGameboard && typedProps.board?.contents && <ItemCount count={typedProps.board.contents.length} />}
                 </div>
-                <div className={classNames("align-content-center text-overflow-ellipsis", siteSpecific("pe-2", "py-3"))}>
+                <div className={classNames("align-content-center text-overflow-ellipsis", siteSpecific("pe-2 ps-1 ms-n1", "py-3"))}>
                     <div className={classNames("text-wrap mt-n1", {"d-flex": !wrapTitleTags})}>
                         {url && !isDisabled
                             ? (url.startsWith("http")

src/app/components/pages/BooksOverview.tsx

@@ -8,18 +8,20 @@ import { BooksOverviewSidebar } from "../elements/sidebar/BooksOverviewSidebar";
 import { PageContainer } from "../elements/layout/PageContainer";
 
 export const BookCard = (book: BookInfo) => {
-    return <Link to={book.path} className="book-container d-flex p-2 gap-3">
-        <div className="book-image-container">
-            <img src={book.image} alt={book.title} className="h-100"/>
-        </div>
-        <div className="d-flex flex-column">
-            <h5 className="pt-2 pt-2 pb-1 m-0">{book.title}</h5>
-            <div className="section-divider"/>
-            <span className="text-decoration-none">
-                {book.description}
-            </span>
-        </div>
-    </Link>;
+    return <div className="book-card">
+        <Link to={book.path} className="book-container d-flex gap-3">
+            <div className="book-image-container">
+                <img src={book.image} alt={book.title} className="h-100"/>
+            </div>
+            <div className="d-flex flex-column">
+                <h5 className="pt-2 pt-2 pb-1 m-0">{book.title}</h5>
+                <div className="section-divider"/>
+                <span className="text-decoration-none">
+                    {book.description}
+                </span>
+            </div>
+        </Link>
+    </div>;
 };
 
 export const BooksOverview = () => {

src/app/components/pages/SubjectLandingPage.tsx

@@ -123,10 +123,14 @@ const FooterRow = ({context, books, news, events}: FooterRowProps) => {
                         <h4 className="m-0">Interactive online books <span className="text-theme">({books.length})</span></h4>
                         <div className="section-divider-bold flex-grow-1"/>
                     </div>
-                    <div className={classNames("d-flex item-list-container", {"flex-column col": !fullWidthBooks}, {"row-cols-1 row-cols-md-2 row": fullWidthBooks})}>
-                        {books.slice(0, 4).map((book, index) => <BookCard key={index} {...book} />)}
-                        {books.length > 4 && <Button tag={Link} color="keyline" to={`/books`} className="btn mt-4 mx-7">View more books</Button>}
-                    </div>
+                    <Col className={classNames("item-list-container", {"flex-column": !fullWidthBooks})}>
+                        <Row className={classNames("mx-0", {"row-cols-1 row-cols-md-2": fullWidthBooks})}>
+                            {books.slice(0, 4).map((book, index) => <BookCard key={index} {...book} />)}
+                        </Row>
+                        <Row className="px-7 mx-0">
+                            {books.length > 4 && <Button tag={Link} color="keyline" to={`/books`} className="btn mt-4 mb-2">View more books</Button>}
+                        </Row>
+                    </Col>
                 </>
                 : <>
                     <div className="d-flex flex-column">
@@ -150,7 +154,7 @@ const FooterRow = ({context, books, news, events}: FooterRowProps) => {
             </div>
             <Row className="h-100 item-list-container">
                 {relevantEvents.map((event, i) =>
-                    <Col xs={12} key={i} className={classNames({"mb-3": ['xs', 'md'].includes(deviceSize)})}>
+                    <Col xs={12} key={i} className={classNames("mt-1", {"mb-3": ['xs', 'md'].includes(deviceSize)})}>
                         {event && <EventCard event={event} layout={"landing-page"} className={classNames({"force-horizontal": !['xs', 'md'].includes(deviceSize)})} />}
                     </Col>
                 )}

src/scss/phy/books.scss

@@ -93,6 +93,18 @@ svg.book-page-icon {
   }
 }
 
+.book-card {
+  padding: 0;
+
+  // To allow for a visible focus outlines across all book-card contexts, book-containers within book-cards
+  // should have a small margin to prevent the box shadow from being cut off, and a width that accomodates this margin
+  .book-container {
+    padding: 0.25rem;
+    margin: 0.25rem;
+    max-width: calc(100% - 0.5rem);
+  }
+}
+
 .book-image-container {
   position: relative;
   width: max-content;