Place instance info block in the page header

src/App.vue

@@ -139,7 +139,7 @@ menu {
 
 .wide {
   /* Reserve space for floating avatar */
-  padding: 0 $content-gap * 1.5;
+  padding: $body-padding $content-gap * 1.5;
 }
 
 @media screen and (max-width: $screen-breakpoint-medium) {

src/components/InstanceInfo.vue

@@ -30,7 +30,6 @@ const { instance } = $(useInstanceInfo())
   flex-shrink: 1;
   gap: $block-inner-padding;
   padding: $block-inner-padding;
-  width: $wide-sidebar-width;
 
   h1 {
     font-size: 32px;
@@ -41,11 +40,4 @@ const { instance } = $(useInstanceInfo())
     width: min-content;
   }
 }
-
-@media screen and (max-width: $screen-breakpoint-small) {
-  .instance-info {
-    margin-bottom: $body-padding;
-    width: 100%;
-  }
-}
 </style>

src/components/Sidebar.vue

@@ -24,7 +24,6 @@
       <span>Logout</span>
     </a>
   </div>
-  <instance-info v-else-if="!isUserAuthenticated"></instance-info>
 </template>
 
 <script setup lang="ts">
@@ -32,7 +31,6 @@ import { onMounted } from "vue"
 import { $, $computed } from "vue/macros"
 import { useRouter } from "vue-router"
 
-import InstanceInfo from "@/components/InstanceInfo.vue"
 import { useNotifications } from "@/store/notifications"
 import { useCurrentUser } from "@/store/user"
 

src/components/SidebarLayout.vue

@@ -19,11 +19,14 @@
       </div>
     </div>
   </header>
+  <div v-else id="header-public" class="wide">
+    <instance-info></instance-info>
+  </div>
   <div id="main" :class="{ wide: currentUser === null }">
     <div class="content">
       <slot name="content"></slot>
     </div>
-    <sidebar></sidebar>
+    <sidebar v-if="currentUser !== null"></sidebar>
   </div>
 </template>
 
@@ -32,6 +35,7 @@ import { $ } from "vue/macros"
 
 import { useCurrentUser } from "@/store/user"
 import Avatar from "@/components/Avatar.vue"
+import InstanceInfo from "@/components/InstanceInfo.vue"
 import Search from "@/components/Search.vue"
 import Sidebar from "@/components/Sidebar.vue"
 
@@ -135,6 +139,21 @@ header {
   }
 }
 
+#header-public {
+  background-color: $background-color;
+  margin: 0 auto;
+  position: sticky;
+  top: 0;
+  width: $wide-content-width;
+  z-index: 1;
+}
+
+.instance-info {
+  max-width: $wide-content-width;
+  min-width: $content-min-width;
+  width: $wide-content-width;
+}
+
 #main {
   align-items: flex-start;
   display: flex;
@@ -157,14 +176,15 @@ header {
   :deep(h1) {
     font-size: 32px;
     font-weight: bold;
-    margin: 0 0 $block-outer-padding * 1.5;
+    margin: 0 0 $block-outer-padding;
   }
 }
 
 #main.wide {
   /* main element should not have top padding to make scrollTo impl simpler */
-  margin-top: $content-gap;
-  max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
+  margin-top: 1px;
+  max-width: $wide-content-width;
+  padding-top: 0;
 
   .content {
     max-width: $wide-content-width;
@@ -179,10 +199,6 @@ header {
     /* Equal to header's bottom padding + margin */
     gap: $block-outer-padding + $body-padding;
   }
-
-  #main.wide {
-    margin-top: 0;
-  }
 }
 
 @media screen and (max-width: $screen-breakpoint-small) {
@@ -211,13 +227,22 @@ header {
     }
   }
 
+  #header-public {
+    width: auto;
+  }
+
   #main {
     flex-direction: column-reverse;
     gap: 0;
   }
 
+  #main.wide {
+    max-width: none;
+  }
+
   #main .content,
-  #main.wide .content {
+  #main.wide .content,
+  .instance-info {
     max-width: none;
     min-width: auto;
     width: 100%;

src/styles/_layout.scss

@@ -11,7 +11,7 @@ $block-outer-padding: 20px;
 $block-inner-padding: 20px;
 $input-padding: 10px;
 
-$wide-content-width: 600px;
+$wide-content-width: 650px;
 $wide-sidebar-width: 400px;
 
 $avatar-size: 42px;