TootComposer: fix options padding

src/material/cards.css

@@ -18,7 +18,8 @@
     }
 
     &>.card-pad {
-      margin-inline: var(--card-pad);
+      margin-left: var(--card-pad);
+      margin-right: var(--card-pad);
     }
 
     &>.card-gut {

src/timelines/TootComposer.css

@@ -2,7 +2,7 @@
   --card-gut: 8px;
   contain: content;
 
-  > .MuiToolbar-root {
+  >.MuiToolbar-root {
     justify-content: space-between;
 
     > :first-child {
@@ -27,8 +27,8 @@
     flex-flow: row wrap;
     padding-top: 16px;
     padding-bottom: 8px;
-    margin-left: -0.5em;
+    margin-left: calc(var(--card-pad) - 0.5em);
-    margin-right: -0.5em;
+    margin-right: calc(var(--card-pad) - 0.5em);
 
     animation: TootComposerFadeIn 110ms var(--tutu-anim-curve-sharp) both;
   }
@@ -42,4 +42,4 @@
   100% {
     opacity: 1;
   }
-}
+}

src/timelines/TootComposer.tsx

@@ -316,7 +316,7 @@ const TootComposer: Component<{
   return (
     <div
       ref={props.ref}
-      class={/* @once */ `TootComposer card`}
+      class="TootComposer card"
       style={containerStyle()}
       on:touchend={
         cancelEvent
@@ -404,7 +404,7 @@ const TootComposer: Component<{
       </div>
 
       <Show when={active()}>
-        <div class="options card-pad card-gut">
+        <div class="options card-gut">
           <Button
             startIcon={<Translate />}
             endIcon={<ArrowDropDown />}