Add language picker to server rules section (#34820)

app/javascript/styles/mastodon/about.scss

@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'functions' as *;
 
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
@@ -93,3 +94,52 @@ $fluid-breakpoint: $maximum-width + 20px;
     color: $darker-text-color;
   }
 }
+
+.rules-languages {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  position: relative;
+
+  > label {
+    font-size: 14px;
+    font-weight: 600;
+    color: $primary-text-color;
+  }
+
+  > select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: $primary-text-color;
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: inherit;
+    resize: vertical;
+    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-radius: 4px;
+    padding-inline-start: 10px;
+    padding-inline-end: 30px;
+    height: 41px;
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    content: '';
+    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14.933' height='18.467' viewBox='0 0 14.933 18.467'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='currentColor' /></svg>")
+      no-repeat 50% 50%;
+    mask-size: contain;
+    right: 8px;
+    background-color: lighten($ui-base-color, 12%);
+    pointer-events: none;
+  }
+}

app/javascript/styles/mastodon/components.scss

@@ -9848,6 +9848,8 @@ noscript {
       border: 1px solid var(--background-border-color);
       color: $highlight-text-color;
       cursor: pointer;
+      width: 100%;
+      background: none;
     }
 
     &.active &__title {