fixed selection from list and sticking of modal windows to window edges

This commit is contained in:
coolcoala
2025-07-14 05:07:15 +03:00
parent 25b295f2a8
commit ce3b0bb479
3 changed files with 11 additions and 14 deletions

View File

@@ -358,7 +358,7 @@ export const GroupsEditorViewer = (props: Props) => {
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent className="min-w-6xl h-[90vh] flex flex-col"> <DialogContent className="lg:min-w-5xl h-[90vh] flex flex-col">
<DialogHeader> <DialogHeader>
<div className="flex justify-between items-center pr-8"> <div className="flex justify-between items-center pr-8">
<DialogTitle>{t("Edit Groups")}</DialogTitle> <DialogTitle>{t("Edit Groups")}</DialogTitle>

View File

@@ -302,7 +302,7 @@ export const ProxiesEditorViewer = (props: Props) => {
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent className="min-w-4xl h-[80vh] flex flex-col"> <DialogContent className="lg:max-w-4xl h-[80vh] flex flex-col">
<DialogHeader> <DialogHeader>
<div className="flex justify-between items-center pr-8"> <div className="flex justify-between items-center pr-8">
<DialogTitle>{t("Edit Proxies")}</DialogTitle> <DialogTitle>{t("Edit Proxies")}</DialogTitle>

View File

@@ -188,7 +188,7 @@ const rules: {
]; ];
const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"]; const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
// --- Компонент Combobox для замены Autocomplete ---
const Combobox = ({ const Combobox = ({
options, options,
value, value,
@@ -202,7 +202,7 @@ const Combobox = ({
}) => { }) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen} modal={true}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
variant="outline" variant="outline"
@@ -223,11 +223,8 @@ const Combobox = ({
<CommandItem <CommandItem
key={option} key={option}
value={option} value={option}
onSelect={(currentValue) => { onSelect={() => {
onSelect( onSelect(option);
options.find((opt) => opt.toLowerCase() === currentValue) ||
"",
);
setOpen(false); setOpen(false);
}} }}
> >
@@ -517,7 +514,7 @@ export const RulesEditorViewer = (props: Props) => {
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent className="min-w-5xl h-[80vh] flex flex-col"> <DialogContent className="w-[95vw] lg:min-w-5xl h-[80vh] flex flex-col">
<DialogHeader> <DialogHeader>
<div className="flex justify-between items-center pr-8"> <div className="flex justify-between items-center pr-8">
<DialogTitle>{t("Edit Rules")}</DialogTitle> <DialogTitle>{t("Edit Rules")}</DialogTitle>
@@ -533,8 +530,8 @@ export const RulesEditorViewer = (props: Props) => {
<div className="flex-1 min-h-0 mt-4"> <div className="flex-1 min-h-0 mt-4">
{visualization ? ( {visualization ? (
<div className="h-full flex gap-4"> <div className="h-full flex flex-col lg:flex-row gap-4">
<div className="w-1/3 flex flex-col gap-4 p-1"> <div className="w-full lg:w-1/3 flex flex-col gap-4 p-1">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("Rule Type")}</Label> <Label>{t("Rule Type")}</Label>
<Combobox <Combobox
@@ -621,8 +618,8 @@ export const RulesEditorViewer = (props: Props) => {
</Button> </Button>
</div> </div>
</div> </div>
<Separator orientation="vertical" /> <Separator orientation="vertical" className="hidden lg:flex" />
<div className="w-2/3 flex flex-col"> <div className="w-full lg:w-2/3 flex flex-col min-w-0 flex-1">
<BaseSearchBox <BaseSearchBox
onSearch={(matcher) => setMatch(() => matcher)} onSearch={(matcher) => setMatch(() => matcher)}
/> />