feat(react/ribbon): improve editability select

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;

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)}

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;
 }

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"

apps/client/src/widgets/ribbon/style.css

@@ -120,4 +120,8 @@
     max-height: 500px;
     overflow-y: auto;
     overflow-x: hidden;
+}
+
+.editability-dropdown {
+    width: 300px;
 }