fixed selection from list and sticking of modal windows to window edges
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user