Profile: support wide page

src/platform/StackedRouter.css

@@ -1,9 +1,10 @@
 .StackedPage {
-  contain: layout style;
+  contain: strict;
-  container: StackedPage / size;
+  container: StackedPage / inline-size;
-  display: contents;
+  width: 100vw;
-  max-width: 100vw;
+  width: 100dvw;
-  max-width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
 }
 
 dialog.StackedPage {

src/profiles/Profile.css

@@ -115,6 +115,44 @@
   }
 }
 
+@container StackedPage (inline-size >=960px) {
+  .Profile {
+    display: grid;
+    grid-template-columns: auto 560px;
+    grid-template-rows: min-content 1fr;
+    height: 100cqh;
+
+    >.topbar {
+      grid-column: 1 / 3;
+      grid-row: 1 /2;
+
+      .MuiToolbar-root {
+        padding-right: calc(560px + 24px);
+      }
+    }
+
+    > .details {
+      height: 100%;
+      display: flex;
+      flex-flow: column nowrap;
+
+      > .intro {
+        flex-grow: 1;
+      }
+    }
+
+    >.recent-toots {
+      overflow-y: auto;
+      margin-top: calc(-1 * var(--scaffold-topbar-height));
+      z-index: calc(var(--tutu-zidx-nav, 1) + 1);
+
+      >.toot-list-toolbar {
+        top: 0;
+      }
+    }
+  }
+}
+
 .Profile__page-title {
   flex-grow: 1;
   white-space: nowrap;

src/profiles/Profile.tsx

@@ -237,6 +237,7 @@ const Profile: Component = () => {
       }
       class="Profile"
     >
+      <div class="details">
         <Menu
           id={optMenuId}
           open={menuOpen()}
@@ -424,7 +425,9 @@ const Profile: Component = () => {
                   aria-label="Display name"
                 ></Body2>
               </div>
-            <span aria-label="Complete username" class="username">{fullUsername()}</span>
+              <span aria-label="Complete username" class="username">
+                {fullUsername()}
+              </span>
             </div>
             <div role="presentation">
               <Switch>
@@ -493,7 +496,9 @@ const Profile: Component = () => {
             </tbody>
           </table>
         </div>
+      </div>
 
+      <div class="recent-toots">
         <div class="toot-list-toolbar">
           <TootFilterButton
             options={{
@@ -546,6 +551,7 @@ const Profile: Component = () => {
             </IconButton>
           </div>
         </Show>
+      </div>
     </Scaffold>
   );
 };