From da4810672d2f302e8311ab7bc9c964b4e621813f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 21 Aug 2025 22:24:35 +0300
Subject: [PATCH] feat(react/ribbon): improve editability select

---
 apps/client/src/widgets/react/Dropdown.tsx            | 2 +-
 apps/client/src/widgets/react/FormDropdownList.tsx    | 8 ++++----
 apps/client/src/widgets/react/FormList.css            | 4 ++++
 apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx | 1 +
 apps/client/src/widgets/ribbon/style.css              | 4 ++++
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx
index 2578aec31..025192d74 100644
--- a/apps/client/src/widgets/react/Dropdown.tsx
+++ b/apps/client/src/widgets/react/Dropdown.tsx
@@ -4,7 +4,7 @@ import { CSSProperties } from "preact/compat";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { useUniqueName } from "./hooks";
 
-interface DropdownProps {
+export interface DropdownProps {
     className?: string;
     buttonClassName?: string;
     isStatic?: boolean;
diff --git a/apps/client/src/widgets/react/FormDropdownList.tsx b/apps/client/src/widgets/react/FormDropdownList.tsx
index 4bab06948..08d607a8c 100644
--- a/apps/client/src/widgets/react/FormDropdownList.tsx
+++ b/apps/client/src/widgets/react/FormDropdownList.tsx
@@ -1,7 +1,7 @@
-import Dropdown from "./Dropdown";
+import Dropdown, { DropdownProps } from "./Dropdown";
 import { FormListItem } from "./FormList";
 
-interface FormDropdownList<T> {
+interface FormDropdownList<T> extends Omit<DropdownProps, "children"> {
     values: T[];
     keyProperty: keyof T;
     titleProperty: keyof T;
@@ -10,11 +10,11 @@ interface FormDropdownList<T> {
     onChange(newValue: string): void;
 }
 
-export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange }: FormDropdownList<T>) {
+export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
     const currentValueData = values.find(value => value[keyProperty] === currentValue);
 
     return (
-        <Dropdown text={currentValueData?.[titleProperty] ?? ""}>
+        <Dropdown text={currentValueData?.[titleProperty] ?? ""} {...restProps}>
             {values.map(item => (
                 <FormListItem
                     onClick={() => onChange(item[keyProperty] as string)}
diff --git a/apps/client/src/widgets/react/FormList.css b/apps/client/src/widgets/react/FormList.css
index 62631b131..ae5c3340f 100644
--- a/apps/client/src/widgets/react/FormList.css
+++ b/apps/client/src/widgets/react/FormList.css
@@ -2,4 +2,8 @@
     font-size: small;
     color: var(--muted-text-color);
     white-space: normal;
+}
+
+.dropdown-item span.bx {
+    flex-shrink: 0;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index 84de1b425..733c2dbe2 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -150,6 +150,7 @@ function EditabilitySelect({ note }: { note?: FNote | null }) {
             <span>{t("basic_properties.editable")}:</span> &nbsp;
 
             <FormDropdownList
+                className="editability-dropdown"
                 values={options}
                 currentValue={ readOnly ? "readOnly" : autoReadOnlyDisabled ? "autoReadOnlyDisabled" : "auto" }
                 keyProperty="value" titleProperty="label" descriptionProperty="description"
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 5f38712ad..f29d1cf4a 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -120,4 +120,8 @@
     max-height: 500px;
     overflow-y: auto;
     overflow-x: hidden;
+}
+
+.editability-dropdown {
+    width: 300px;
 }
\ No newline at end of file