Adjust CSS to render toast messages on full-width layouts

src/styles/sidebar/components/toast-messages.scss

 @use "../../mixins/panel";
+@use "../mixins/responsive";
 @use "../../variables" as var;
 
 .toast-messages {
   position: absolute;
   z-index: 1;
-  width: 100%;
   left: 0;
-  padding: 0 8px;
+  width: 100%;
+  padding: 0 0.5em;
+
+  @include responsive.tablet-and-up {
+    // When displaying in a wider viewport (desktop/tablet outside of sidebar)
+    max-width: responsive.$break-tablet;
+    width: responsive.$break-tablet;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    left: 50%;
+    margin-left: calc(-0.5 * #{responsive.$break-tablet});
+  }
 }
 
 .toast-message-container {
@@ -70,6 +81,7 @@
 
   &__message {
     padding: 1em;
+    width: 100%;
   }
 
   &__link {