From c0af4581aa1d7d702f97b9a3821dcea311d3dd0a Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 8 Sep 2025 14:53:23 +0200
Subject: [PATCH] Visibility dialog: Add visual dropdown indicator to Dropdown
 component (#36052)

---
 app/javascript/mastodon/components/dropdown/index.tsx | 10 +++++++++-
 app/javascript/styles/mastodon/components.scss        |  9 +++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/components/dropdown/index.tsx b/app/javascript/mastodon/components/dropdown/index.tsx
index c7fee4a39..487850fa7 100644
--- a/app/javascript/mastodon/components/dropdown/index.tsx
+++ b/app/javascript/mastodon/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
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7c05872d4..85d559b1c 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5711,6 +5711,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);
@@ -5726,6 +5728,13 @@ a.status-card {
     }
   }
 
+  &__icon {
+    margin-inline: auto -4px;
+    width: 18px;
+    height: 18px;
+    opacity: 0.5;
+  }
+
   &__helper {
     margin-top: 4px;
     font-size: 0.8em;