[Glitch] Visibility dialog: Add visual dropdown indicator to Dropdown component

Port c0af4581aa to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/dropdown/index.tsx

@@ -8,8 +8,11 @@ import classNames from 'classnames';
 
 import Overlay from 'react-overlays/Overlay';
 
+import UnfoldMoreIcon from '@/material-icons/400-24px/unfold_more.svg?react';
+
 import type { SelectItem } from '../dropdown_selector';
 import { DropdownSelector } from '../dropdown_selector';
+import { Icon } from '../icon';
 
 import { matchWidth } from './utils';
 
@@ -77,11 +80,16 @@ export const Dropdown: FC<
             defaultMessage='Select an option'
           />
         )}
+        <Icon
+          id='unfold-icon'
+          icon={UnfoldMoreIcon}
+          className={`${classPrefix}__icon`}
+        />
       </button>
 
       <Overlay
         show={open}
-        offset={[0, 4]}
+        offset={[0, 0]}
         placement='bottom-start'
         onHide={handleClose}
         flip

app/javascript/flavours/glitch/styles/components.scss

@@ -5948,6 +5948,8 @@ a.status-card {
   }
 
   &__button {
+    display: flex;
+    align-items: center;
     color: $primary-text-color;
     background: var(--dropdown-background-color);
     border: 1px solid var(--dropdown-border-color);
@@ -5963,6 +5965,13 @@ a.status-card {
     }
   }
 
+  &__icon {
+    margin-inline: auto -4px;
+    width: 18px;
+    height: 18px;
+    opacity: 0.5;
+  }
+
   &__helper {
     margin-top: 4px;
     font-size: 0.8em;