fix: styling for AccountsView on desktop and mobile

src/assets/main.css

@@ -130,6 +130,7 @@
 }
 
 .page {
+  width: 100%;
   min-height: 100vh;
   padding: 1rem 1rem calc(var(--nav-height) + var(--safe-bottom) + 1.5rem);
   padding-top: calc(1rem + var(--safe-top));

src/components/InvitesPanel.vue

@@ -384,6 +384,12 @@ function inviteDetail(invite: Invite): string {
   text-overflow: ellipsis;
 }
 
+@media (min-width: 768px) {
+  .invite-code {
+    max-width: 80ch;
+  }
+}
+
 .invite-status-pill {
   flex-shrink: 0;
   font-size: 0.65rem;

src/views/AccountView.vue

@@ -37,7 +37,7 @@ onMounted(() => {
 
     <InvitesPanel />
 
-    <h1>Pending changes</h1>
+    <h1 class="section-heading">Pending changes</h1>
 
     <section class="card info-card">
       <h4>Sync status</h4>
@@ -56,11 +56,21 @@ onMounted(() => {
 </template>
 
 <style scoped>
+@media (min-width: 768px) {
+  .page.about {
+    max-width: 780px;
+  }
+}
+
 .about h1 {
   font-size: 1.35rem;
   margin-bottom: 0.75rem;
 }
 
+.section-heading {
+  margin-top: 1.5rem;
+}
+
 .about p {
   color: var(--c-text-soft);
   font-size: 0.9rem;