Make sheet have header and body section

src/app.css

@@ -583,22 +583,36 @@ button.carousel-dot[disabled].active {
 }
 .sheet {
   align-self: flex-end;
+  display: flex;
+  flex-direction: column;
   max-height: 90vh;
   max-height: 90dvh;
-  overflow: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   background-color: var(--bg-color);
   width: 100%;
   max-width: calc(40em - 50px - 16px);
   border-radius: 16px 16px 0 0;
-  padding: 16px;
-  padding-left: max(16px, env(safe-area-inset-left));
-  padding-right: max(16px, env(safe-area-inset-right));
-  padding-bottom: max(16px, env(safe-area-inset-bottom));
   box-shadow: 0 -1px 32px var(--divider-color);
   animation: slide-up 0.2s var(--timing-function);
   border: 1px solid var(--outline-color);
+}
+.sheet header {
+  padding: 16px 16px 8px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+}
+.sheet main {
+  overflow: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
+  padding: 16px 16px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+  padding-bottom: max(16px, env(safe-area-inset-bottom));
+  mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
+}
+.sheet header + main {
+  padding-top: 0;
 }
 
 /* TAG */

src/components/account.css

@@ -12,7 +12,7 @@
   font-size: 95%;
   line-height: 1.4;
 }
-#account-container .note:not(:has(p)) {
+#account-container .note:not(:has(p)):not(:empty) {
   /* Some notes don't have <p> tags, so we need to add some padding */
   padding: 1em 0;
 }

src/components/account.jsx

@@ -108,6 +108,7 @@ function Account({ account }) {
             <Avatar size="xxxl" />
             ███ ████████████
           </header>
+          <main>
             <div class="note">
               <p>████████ ███████</p>
               <p>███████████████ ███████████████</p>
@@ -117,6 +118,7 @@ function Account({ account }) {
               <span>██ Following</span>
               <span>██ Followers</span>
             </p>
+          </main>
         </>
       ) : (
         <>
@@ -124,6 +126,7 @@ function Account({ account }) {
             <Avatar url={avatar} size="xxxl" />
             <NameText account={info} showAcct external />
           </header>
+          <main>
             <div
               class="note"
               dangerouslySetInnerHTML={{
@@ -154,7 +157,8 @@ function Account({ account }) {
             )}
             <p class="stats">
               <span>
-              <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
+                <b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
+                Posts
               </span>
               <span>
                 <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
@@ -214,6 +218,7 @@ function Account({ account }) {
                 </button>
               )}
             </p>
+          </main>
         </>
       )}
     </div>

src/components/status.css

@@ -712,6 +712,11 @@ a.card:hover {
   min-height: 50dvh;
 }
 
+#edit-history h2 {
+  margin: 0;
+  padding: 0;
+}
+
 #edit-history :is(ol, ol li) {
   list-style: none;
   margin: 0;

src/components/status.jsx

@@ -1134,6 +1134,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
 
   return (
     <div id="edit-history" class="sheet">
+      <header>
         {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
       </button> */}
@@ -1144,6 +1145,8 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
             <Loader abrupt /> Loading&hellip;
           </p>
         )}
+      </header>
+      <main>
         {editHistory.length > 0 && (
           <ol>
             {editHistory.map((status) => {
@@ -1174,6 +1177,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
             })}
           </ol>
         )}
+      </main>
     </div>
   );
 }

src/pages/settings.jsx

@@ -24,6 +24,7 @@ function Settings({ onClose }) {
 
   return (
     <div id="settings-container" class="sheet">
+      <main>
         {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
       </button> */}
@@ -204,6 +205,7 @@ function Settings({ onClose }) {
             )}
           </p>
         )}
+      </main>
     </div>
   );
 }