Merge commit '0ec6c26af3d7dc9a0eeb5631ebb9f56b724aaa8e' into glitch-soc/merge-upstream

app/javascript/mastodon/components/status_banner.tsx

@@ -8,6 +8,10 @@ export enum BannerVariant {
   Filter = 'filter',
 }
 
+const stopPropagation: MouseEventHandler = (e) => {
+  e.stopPropagation();
+};
+
 export const StatusBanner: React.FC<{
   children: React.ReactNode;
   variant: BannerVariant;
@@ -38,6 +42,7 @@ export const StatusBanner: React.FC<{
           : 'content-warning content-warning--filter'
       }
       onClick={forwardClick}
+      onMouseUp={stopPropagation}
     >
       <p id={descriptionId}>{children}</p>
 

app/javascript/styles/mastodon/_variables.scss

@@ -96,6 +96,7 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 1175px;
+$mobile-menu-breakpoint: 760px;
 $mobile-breakpoint: 630px;
 $no-columns-breakpoint: 600px;
 

app/javascript/styles/mastodon/components.scss

@@ -294,7 +294,7 @@
 
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     color: lighten($action-button-color, 7%);
     background-color: rgba($action-button-color, 0.15);
   }
@@ -314,7 +314,7 @@
 
     &:hover,
     &:active,
-    &:focus {
+    &:focus-visible {
       color: darken($lighter-text-color, 7%);
       background-color: rgba($lighter-text-color, 0.15);
     }
@@ -334,7 +334,7 @@
 
     &:hover,
     &:active,
-    &:focus {
+    &:focus-visible {
       color: $highlight-text-color;
       background-color: transparent;
     }
@@ -2863,17 +2863,18 @@ a.account__display-name {
 }
 
 .ui__navigation-bar {
-  position: sticky;
+  position: fixed;
   bottom: 0;
-  background: var(--background-color);
-  backdrop-filter: var(--background-filter);
-  border-top: 1px solid var(--background-border-color);
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
   gap: 8px;
   padding-bottom: env(safe-area-inset-bottom);
+  background: var(--background-color);
+  backdrop-filter: var(--background-filter);
+  border-top: 1px solid var(--background-border-color);
 
   .layout-multiple-columns & {
     display: none;
@@ -2984,11 +2985,20 @@ a.account__display-name {
 }
 
 .ui {
+  --mobile-bottom-nav-height: 55px;
+  --last-content-item-border-width: 2px;
+
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
+
+  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
+    padding-bottom: calc(
+      var(--mobile-bottom-nav-height) - var(--last-content-item-border-width)
+    );
+  }
 }
 
 .drawer {
@@ -3475,6 +3485,7 @@ a.account__display-name {
     &__header {
       display: flex;
       align-items: center;
+      padding-inline-end: 4px;
 
       &__sep {
         width: 0;