Time to embrace sheets

.box class is just… weird…

src/app.css

@@ -414,31 +414,6 @@ a.mention span {
   width: 40em;
   max-width: 100vw;
   padding: 16px;
-  background-color: var(--bg-color);
-  border-radius: 8px;
-  border: 1px solid var(--divider-color);
-  overflow: auto;
-  max-height: 90vh;
-  max-height: 90dvh;
-  position: relative;
-}
-.box > :is(h1, h2, h3):first-of-type {
-  margin-top: 0;
-}
-.box .close-button {
-  position: sticky;
-  top: 0;
-  float: right;
-  margin: -16px -8px 0 0;
-  transform: translate(0, -8px);
-}
-
-.box-shadow {
-  box-shadow: 0px 36px 89px rgb(0 0 0 / 4%),
-    0px 23.3333px 52.1227px rgb(0 0 0 / 3%),
-    0px 13.8667px 28.3481px rgb(0 0 0 / 2%), 0px 7.2px 14.4625px rgb(0 0 0 / 2%),
-    0px 2.93333px 7.25185px rgb(0 0 0 / 2%),
-    0px 0.666667px 3.50231px rgb(0 0 0 / 1%);
 }
 
 /* CAROUSEL */

src/components/status.jsx

@@ -1063,10 +1063,10 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
   const currentYear = new Date().getFullYear();
 
   return (
-    <div id="edit-history" class="box">
-      <button type="button" class="close-button plain large" onClick={onClose}>
+    <div id="edit-history" class="sheet">
+      {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
-      </button>
+      </button> */}
       <h2>Edit History</h2>
       {uiState === 'error' && <p>Failed to load history</p>}
       {uiState === 'loading' && (

src/pages/settings.css

@@ -1,10 +1,5 @@
-#settings-container {
-  padding-bottom: 3em;
-  animation: fade-in 0.2s ease-out;
-}
-
 #settings-container h2 {
-  font-size: .9em;
+  font-size: 0.9em;
   text-transform: uppercase;
   color: var(--text-insignificant-color);
 }
@@ -48,7 +43,7 @@
   text-align: right;
 }
 #settings-container div,
-#settings-container div > *{
+#settings-container div > * {
   vertical-align: middle;
 }
 #settings-container .avatar {
@@ -63,7 +58,7 @@
   overflow: hidden;
   padding: 1px;
 }
-#settings-container .radio-group input[type="radio"] {
+#settings-container .radio-group input[type='radio'] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
@@ -87,4 +82,4 @@
 }
 #settings-container .radio-group label:has(input:checked) input:checked + span {
   color: inherit;
-}
+}

src/pages/settings.jsx

@@ -23,10 +23,10 @@ function Settings({ onClose }) {
   const [currentDefault, setCurrentDefault] = useState(0);
 
   return (
-    <div id="settings-container" class="box">
-      <button type="button" class="close-button plain large" onClick={onClose}>
+    <div id="settings-container" class="sheet">
+      {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
-      </button>
+      </button> */}
       <h2>Accounts</h2>
       <ul class="accounts-list">
         {accounts.map((account, i) => {