Refine sticky header styling

css/tailwind.source.css

@@ -138,7 +138,10 @@
     z-index: var(--z-app-header);
     padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0));
     padding-bottom: var(--space-sm);
-    background-color: var(--surface-base);
+    background-image: var(--surface-overlay-banner-gradient);
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
     box-shadow: var(--shadow-sm);
   }
 
@@ -2392,7 +2395,12 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: var(--space-sidebar-shell-block-start) var(--space-sidebar-shell-inline)
+    padding: calc(
+        var(--space-sm) +
+          (var(--space-2xl-plus) - var(--sidebar-control-size)) / 2 +
+          env(safe-area-inset-top, 0)
+      )
+      var(--space-sidebar-shell-inline)
       var(--space-sidebar-shell-block-end);
     width: 100%;
     border-radius: var(--radius-sidebar-shell);