style: 💄 tweak the sidebar to better align with design

addons/rose/addon/components/rose/nav/sidebar/index.hbs

@@ -2,6 +2,7 @@
   ...attributes
   class="rose-nav-sidebar"
   id={{this.id}}
+  title={{@title}}
   aria-labelledby={{if @title (concat "title-" this.id)}}>
 
   {{#if @title}}

addons/rose/addon/styles/rose/components/nav/_sidebar.scss

@@ -3,10 +3,20 @@
 
 .rose-nav-sidebar {
   $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs);
+  $yPadding: sizing.rems(xs);
 
+  padding-top: $yPadding;
+  padding-bottom: $yPadding;
+  border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  // TODO revisit the title
   .rose-nav-title {
     @include type.type(xs, semibold);
-    display: block;
+    display: none;
     color: var(--ui-gray);
     text-transform: uppercase;
     $lineHeight: 20 / 12;

ui/core/app/styles/app.scss

@@ -19,7 +19,6 @@
 }
 
 .rose-nav-sidebar {
-  margin-bottom: sizing.rems(l);
   margin-top: sizing.rems(xxl);
 
   & + .rose-nav-sidebar {
@@ -96,9 +95,9 @@
 
 .copyable {
   .copyable-button {
+    margin: 0;
+    padding: 0 sizing.rems(xxs);
     position: relative;
     top: -2px;
-    padding: 0 sizing.rems(xxs);
-    margin: 0;
   }
 }