From 01647445f2ecf34f0681819fb1891db28cfcea8a Mon Sep 17 00:00:00 2001
From: Arunavo Ray <developer@arunavoray.dev>
Date: Tue, 17 Jun 2025 12:48:38 +0530
Subject: [PATCH] Improved layout in larger screens

---
 .../config/OrganizationStrategy.tsx           | 246 ++++++++++++------
 1 file changed, 160 insertions(+), 86 deletions(-)

diff --git a/src/components/config/OrganizationStrategy.tsx b/src/components/config/OrganizationStrategy.tsx
index 3ffab31..5c5d599 100644
--- a/src/components/config/OrganizationStrategy.tsx
+++ b/src/components/config/OrganizationStrategy.tsx
@@ -284,7 +284,7 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
       </div>
 
       <RadioGroup value={strategy} onValueChange={onStrategyChange}>
-        <div className="grid gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {(Object.entries(strategyConfig) as [MirrorStrategy, typeof strategyConfig.preserve][]).map(([key, config]) => {
             const isSelected = strategy === key;
             const Icon = config.icon;
@@ -319,11 +319,6 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
                         <div className="flex-1">
                           <div className="flex items-center gap-2">
                             <h4 className="font-medium text-sm">{config.title}</h4>
-                            {isSelected && (
-                              <Badge variant="secondary" className="text-xs">
-                                Selected
-                              </Badge>
-                            )}
                           </div>
                           <p className="text-xs text-muted-foreground mt-0.5">
                             {config.description}
@@ -375,99 +370,178 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
           </h4>
         </div>
 
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {strategy === "single-org" ? (
+            <>
+              {/* Destination Organization - Left Column */}
+              <div className="space-y-1">
+                <Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
+                  Destination Organization
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>All repositories will be mirrored to this organization</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </Label>
+                <Input
+                  id="destinationOrg"
+                  value={destinationOrg || ""}
+                  onChange={(e) => onDestinationOrgChange(e.target.value)}
+                  placeholder="github-mirrors"
+                  className=""
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Organization for consolidated repositories
+                </p>
+              </div>
+
+              {/* Starred Repositories Organization - Right Column */}
+              <div className="space-y-1">
+                <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
+                  <Star className="h-3.5 w-3.5" />
+                  Starred Repositories Organization
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Starred repositories will be organized separately in this organization</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </Label>
+                <Input
+                  id="starredReposOrg"
+                  value={starredReposOrg || ""}
+                  onChange={(e) => onStarredReposOrgChange(e.target.value)}
+                  placeholder="starred"
+                  className=""
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Keep starred repos organized separately
+                </p>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Starred Repositories Organization - Left Column */}
+              <div className="space-y-1">
+                <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
+                  <Star className="h-3.5 w-3.5" />
+                  Starred Repositories Organization
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Starred repositories will be organized separately in this organization</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </Label>
+                <Input
+                  id="starredReposOrg"
+                  value={starredReposOrg || ""}
+                  onChange={(e) => onStarredReposOrgChange(e.target.value)}
+                  placeholder="starred"
+                  className=""
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Keep starred repos organized separately
+                </p>
+              </div>
+
+              {/* Organization Visibility - Right Column */}
+              <div className="space-y-2">
+                <Label className="text-sm font-normal flex items-center gap-2">
+                  Organization Visibility
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Visibility for newly created organizations</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </Label>
+                <div className="flex gap-2">
+                  {visibilityOptions.map((option) => {
+                    const Icon = option.icon;
+                    const isSelected = visibility === option.value;
+                    return (
+                      <button
+                        key={option.value}
+                        type="button"
+                        onClick={() => onVisibilityChange(option.value)}
+                        className={cn(
+                          "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-all",
+                          "border flex-1",
+                          isSelected
+                            ? "bg-accent border-accent-foreground/20"
+                            : "bg-background hover:bg-accent/50 border-input"
+                        )}
+                      >
+                        <Icon className="h-3.5 w-3.5" />
+                        <span>{option.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Organization Visibility - Full width when single-org is selected */}
         {strategy === "single-org" && (
-          <div className="space-y-1">
-            <Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
-              Destination Organization
+          <div className="space-y-2">
+            <Label className="text-sm font-normal flex items-center gap-2">
+              Organization Visibility
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger>
                     <Info className="h-3.5 w-3.5 text-muted-foreground" />
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>All repositories will be mirrored to this organization</p>
+                    <p>Visibility for newly created organizations</p>
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             </Label>
-            <Input
-              id="destinationOrg"
-              value={destinationOrg || ""}
-              onChange={(e) => onDestinationOrgChange(e.target.value)}
-              placeholder="github-mirrors"
-              className=""
-            />
-            <p className="text-xs text-muted-foreground mt-1">
-              Organization for consolidated repositories
-            </p>
+            <div className="flex gap-2">
+              {visibilityOptions.map((option) => {
+                const Icon = option.icon;
+                const isSelected = visibility === option.value;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => onVisibilityChange(option.value)}
+                    className={cn(
+                      "flex items-center gap-1.5 px-4 py-1.5 rounded-md text-sm transition-all",
+                      "border",
+                      isSelected
+                        ? "bg-accent border-accent-foreground/20"
+                        : "bg-background hover:bg-accent/50 border-input"
+                    )}
+                  >
+                    <Icon className="h-3.5 w-3.5" />
+                    <span>{option.label}</span>
+                  </button>
+                );
+              })}
+            </div>
           </div>
         )}
-
-        <div className="space-y-1">
-          <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
-            <Star className="h-3.5 w-3.5" />
-            Starred Repositories Organization
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Info className="h-3.5 w-3.5 text-muted-foreground" />
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Starred repositories will be organized separately in this organization</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </Label>
-          <Input
-            id="starredReposOrg"
-            value={starredReposOrg || ""}
-            onChange={(e) => onStarredReposOrgChange(e.target.value)}
-            placeholder="starred"
-            className=""
-          />
-          <p className="text-xs text-muted-foreground mt-1">
-            Keep starred repos organized separately from your own repositories
-          </p>
-        </div>
-
-        <div className="space-y-2">
-          <Label className="text-sm font-normal flex items-center gap-2">
-            Organization Visibility
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Info className="h-3.5 w-3.5 text-muted-foreground" />
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Visibility for newly created organizations</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </Label>
-          <div className="flex gap-2">
-            {visibilityOptions.map((option) => {
-              const Icon = option.icon;
-              const isSelected = visibility === option.value;
-              return (
-                <button
-                  key={option.value}
-                  type="button"
-                  onClick={() => onVisibilityChange(option.value)}
-                  className={cn(
-                    "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-all",
-                    "border",
-                    isSelected
-                      ? "bg-accent border-accent-foreground/20"
-                      : "bg-background hover:bg-accent/50 border-input"
-                  )}
-                >
-                  <Icon className="h-3.5 w-3.5" />
-                  <span>{option.label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
       </div>
 
       <Separator className="my-4" />