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

Port c0af4581aa1d7d702f97b9a3821dcea311d3dd0a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/dropdown/index.tsx      | 10 +++++++++-
 app/javascript/flavours/glitch/styles/components.scss  |  9 +++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/components/dropdown/index.tsx b/app/javascript/flavours/glitch/components/dropdown/index.tsx
index c7fee4a396..487850fa70 100644
--- a/app/javascript/flavours/glitch/components/dropdown/index.tsx
+++ b/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
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 6ac7bb7ed3..5b2c9ca07f 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/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;