chore: 🤖 brand and nav should collapse when no items present

addons/rose/addon/styles/rose/components/header/_brand.scss

@@ -7,8 +7,8 @@
   align-items: center;
   color: var(--white);
   text-decoration: none;
-  padding: 10px;
-  margin: 0 10px;
+  padding: 0 10px;
+  margin: 10px;
 
   svg {
     // 28px... header sizes do not follow the sizing system

addons/rose/addon/styles/rose/components/header/nav/_index.scss

@@ -1,3 +1,4 @@
+@use '../../../variables/sizing';
 @use '../../../variables/media';
 
 @import 'link';
@@ -7,12 +8,9 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 10px 0;
-}
 
-@media (max-width: media.width(small)) {
-  .rose-header-nav {
-    padding: 10px 20px;
+  @media (max-width: media.width(small)) {
+    padding: 0 20px;
     background: var(--ui-header-subtler);
   }
 }

addons/rose/addon/styles/rose/components/header/nav/_link.scss

@@ -10,11 +10,12 @@
   text-decoration: none;
 
   color: var(--white);
-  opacity: 0.5;
+  opacity: 0.75;
 
   // again, nonstandard sizing for header stuff
+  margin: 10px 0;
   padding: 6px 12px;
-  border-radius: 4px;
+  border-radius: sizing.rems(xxs);
 
   &.active {
     opacity: 1;