corrected layout on profiles and rules pages

src/components/profile/groups-editor-viewer.tsx

@@ -358,9 +358,9 @@ export const GroupsEditorViewer = (props: Props) => {
 
     return (
         <Dialog open={open} onOpenChange={onClose}>
-            <DialogContent className="max-w-6xl h-[90vh] flex flex-col">
+            <DialogContent className="min-w-6xl h-[90vh] flex flex-col">
                 <DialogHeader>
-                    <div className="flex justify-between items-center">
+                    <div className="flex justify-between items-center pr-8">
                         <DialogTitle>{t("Edit Groups")}</DialogTitle>
                         <Button variant="outline" size="sm" onClick={() => setVisualization(prev => !prev)}>
                             {visualization ? t("Advanced") : t("Visualization")}
@@ -376,7 +376,7 @@ export const GroupsEditorViewer = (props: Props) => {
                                 <div className="w-1/2 flex flex-col border rounded-md p-4">
                                     <h3 className="text-lg font-medium mb-4">Constructor</h3>
                                     <Separator className="mb-4"/>
-                                    <div className="space-y-3 overflow-y-auto pr-3 -mr-3">
+                                    <div className="space-y-3 overflow-y-auto p-1 -mr-3 ">
                                         <FormField control={control} name="type" render={({ field }) => (<FormItem><FormLabel>{t("Group Type")}</FormLabel><Select onValueChange={field.onChange} defaultValue={field.value}><FormControl><SelectTrigger><SelectValue/></SelectTrigger></FormControl><SelectContent><SelectItem value="select">select</SelectItem><SelectItem value="url-test">url-test</SelectItem><SelectItem value="fallback">fallback</SelectItem><SelectItem value="load-balance">load-balance</SelectItem><SelectItem value="relay">relay</SelectItem></SelectContent></Select></FormItem>)}/>
                                         <FormField control={control} name="name" render={({ field }) => (<FormItem><FormLabel>{t("Group Name")}</FormLabel><FormControl><Input {...field} required/></FormControl></FormItem>)}/>
                                         <FormField control={control} name="icon" render={({ field }) => (<FormItem><FormLabel>{t("Proxy Group Icon")}</FormLabel><FormControl><Input {...field}/></FormControl></FormItem>)}/>

src/components/profile/profile-item.tsx

@@ -295,7 +295,7 @@ export const ProfileItem = (props: Props) => {
               </div>
             )}
 
-            <div className="p-3">
+            <div className="px-3">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2 min-w-0">
                   <div

src/components/profile/proxies-editor-viewer.tsx

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

src/components/profile/rules-editor-viewer.tsx

@@ -517,9 +517,9 @@ export const RulesEditorViewer = (props: Props) => {
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-4xl h-[80vh] flex flex-col">
+      <DialogContent className="min-w-5xl h-[80vh] flex flex-col">
         <DialogHeader>
-          <div className="flex justify-between items-center">
+          <div className="flex justify-between items-center pr-8">
             <DialogTitle>{t("Edit Rules")}</DialogTitle>
             <Button
               variant="outline"
@@ -534,7 +534,7 @@ export const RulesEditorViewer = (props: Props) => {
         <div className="flex-1 min-h-0 mt-4">
           {visualization ? (
             <div className="h-full flex gap-4">
-              <div className="w-1/2 flex flex-col gap-4 p-1">
+              <div className="w-1/3 flex flex-col gap-4 p-1">
                 <div className="space-y-2">
                   <Label>{t("Rule Type")}</Label>
                   <Combobox
@@ -622,7 +622,7 @@ export const RulesEditorViewer = (props: Props) => {
                 </div>
               </div>
               <Separator orientation="vertical" />
-              <div className="w-1/2 flex flex-col">
+              <div className="w-2/3 flex flex-col">
                 <BaseSearchBox
                   onSearch={(matcher) => setMatch(() => matcher)}
                 />

src/components/rule/rule-item.tsx

@@ -38,7 +38,7 @@ const RuleItem = (props: Props) => {
 
   return (
     // Корневой элемент, стилизованный с помощью Tailwind
-    <div className="flex p-4 border-b border-border">
+    <div className="flex p-3 border-b border-border">
       {/* Номер правила */}
       <p className="w-10 text-center text-sm text-muted-foreground mr-4 pt-0.5">
         {index}

src/pages/profiles.tsx

@@ -499,7 +499,7 @@ const ProfilePage = () => {
           onDragEnd={onDragEnd}
         >
           <div className="p-4 pt-0">
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-3">
               <SortableContext items={profileItems.map((x) => x.uid)}>
                 {profileItems.map((item) => (
                   <ProfileItem

src/pages/rules.tsx

@@ -104,7 +104,7 @@ const RulesPage = () => {
             {t("Rules")}
           </h2>
           <div className="flex items-center gap-2">
-            <div className="w-64">
+            <div className="w-70">
               {/* Передаем стабильную функцию handleSearch в пропс */}
               <BaseSearchBox onSearch={handleSearch} />
             </div>