Fix multiple minor styling issues

sass/_component_admotion.scss

@@ -14,7 +14,7 @@
   border-radius: $border-radius;
   overflow: hidden;
 
-  *:last-child {
+  &:last-child {
     margin-bottom: 0;
   }
 

sass/_component_search.scss

@@ -1,17 +1,27 @@
+@use "sass:map";
+
 /**
- * Search box
+ * Sidebar with search box
  */
 
+.sidebar-container {
+  @extend .border-right;
+
+  border-right-style: hidden; // hide by default on small devices
+
+  /* stylelint-disable-next-line scss/media-feature-value-dollar-variable */
+  @media screen and (min-width: map.get($grid-breakpoints, "lg")) {
+    max-width: $size-13;
+    border-right-style: solid;
+  }
+}
+
 .collapse {
-  padding-top: 2.4rem !important;
   max-height: 100vh;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
-.searchbox {
-  margin-bottom: 2rem;
-}
-
 /**
  * Autocomplete
  */

sass/_component_versionpicker_fix.scss

@@ -7,7 +7,7 @@ These overrides are necessary to make the version picker work with the Sphinx Wa
   position: fixed;
   bottom: 50px;
   right: 50px;
-  max-width: 300px;
+  max-width: $modal-sm;
   max-height: calc(100vh - 50px);
   overflow-y: auto;
   background: #1f1d1d;

sass/_layout.scss

@@ -0,0 +1,16 @@
+/* Add additional spacing between sections using semantic section elements */
+section {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+/* Workaround for https://github.com/executablebooks/MyST-Parser/issues/533 */
+li > p {
+  margin-bottom: 0;
+}
+
+/* override bootstrap's outline: 0 and force a high contrast outline on all focusable elements */
+*:focus {
+  outline: 3px solid $focus-outline !important;
+  outline-offset: 1px;
+}

sass/_variables.scss

@@ -45,6 +45,8 @@ $table-bg: $white;
 
 $yiq-contrasted-threshold: 160;
 
+$focus-outline: #1f7e9a;
+
 // --------------------------------------------------
 // Code Colors
 // --------------------------------------------------

sass/theme.scss

@@ -31,4 +31,5 @@
 @import "component_versionpicker_fix";
 
 // misc
+@import "layout";
 @import "utilities";

sphinx_wagtail_theme/layout.html

@@ -112,8 +112,8 @@
     </header>
     <div class="container-fluid">
         <div class="row">
-            <aside class="col-12 col-lg-3">
-                <div id="collapseSidebar" class="collapse sticky-top d-lg-block pt-5">
+            <aside class="col-12 col-lg-3 sidebar-container">
+                <div id="collapseSidebar" class="collapse sticky-top d-lg-block pt-5 pr-lg-4">
                     {%- for sidebartemplate in sidebars %}
                     {%- include sidebartemplate %}
                     {%- endfor %}

sphinx_wagtail_theme/searchbox.html

@@ -1,5 +1,5 @@
 {%- if builder != "singlehtml" %}
-<div id="searchbox" class="searchbox" role="search">
+<div id="searchbox" class="searchbox mb-6" role="search">
     <form id="search-form" action="{{ pathto('search') }}" autocomplete="off" method="get">
         <div class="input-group">
             <div class="input-group-prepend">