Profile: fix too small banner image on iPhone

src/profiles/Profile.css

@@ -12,16 +12,12 @@
 
   .banner {
     width: 100%;
-    margin-top: calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)));
+    margin-top: calc(-1 * var(--scaffold-topbar-height));
 
     >img {
       object-fit: cover;
       width: 100%;
       height: 100%;
-
-      &::before {
-        visibility: hidden;
-      }
     }
   }
 

src/timelines/MediaAttachmentGrid.css

@@ -4,6 +4,7 @@
   margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
   margin-right: var(--card-pad, 0);
   gap: 4px;
+  contain: layout style;
 
   > :where(img, video) {
     max-height: 35vh;

src/timelines/toot-components/PreviewCard.css

@@ -1,7 +1,7 @@
 .PreviewCard {
   display: block;
   border: 1px solid #eeeeee;
-  background-color: var(--tutu-color-surface);
+  background-color: var(--tutu-color-surface-d);
   text-decoration: none;
   border-radius: 4px;
   overflow: hidden;
@@ -13,16 +13,16 @@
   overflow: hidden;
   z-index: 1;
   position: relative;
+  contain: layout style;
 
   >img {
-    background-color: #eeeeee;
+    background-color: var(--tutu-color-surface);
     max-width: 100%;
     height: auto;
   }
 
   &:hover,
   &:focus-visible {
-    background-color: var(--tutu-color-surface-d);
     color: var(--tutu-color-on-surface);
 
     >h1 {

src/timelines/toot.module.css

@@ -46,6 +46,7 @@
   align-items: flex-start;
   gap: 8px;
   margin-bottom: 8px;
+  contain: layout style;
 
   > :not(:first-child) {
     flex-grow: 1;