🐛 Fix some style issue

src/views/realms/page.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-container class="flex max-md:flex-col gap-3 overflow-auto h-auto no-scrollbar">
-    <div class="timeline flex-grow-1 mt-[-16px]">
+  <v-container class="wrapper h-auto no-scrollbar">
+    <div class="timeline mt-[-16px]">
       <post-list v-model:posts="posts" :loader="readMore" />
     </div>
 
-    <div class="aside md:sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
+    <div class="aside max-md:order-first">
       <v-card :loading="loading">
         <template #title>
           <div class="flex justify-between">
@@ -123,3 +123,18 @@ function parseContent(src: string): string {
   return dompurify().sanitize(parse(src) as string)
 }
 </script>
+
+<style scoped>
+.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+</style>