Make the default badge live in its column

Author: samejr

apps/webapp/app/components/primitives/Badge.tsx

@@ -7,7 +7,7 @@ const variants = {
   "extra-small":
     "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
   small:
-    "grid place-items-center border border-charcoal-650 rounded-sm px-1.5 h-5 text-xs bg-background-bright text-blue-500 whitespace-nowrap",
+    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-5 text-xs bg-background-bright text-blue-500 whitespace-nowrap",
   "outline-rounded":
     "grid place-items-center rounded-full px-1 h-4 tracking-wider text-xxs border border-blue-500 text-blue-500 uppercase whitespace-nowrap",
   rounded:

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -229,19 +229,21 @@ export default function Page() {
                                 "Not available"
                               )}
                             </TableCell>
-                            <TableCellMenu
-                              className="pl-32"
-                              isSticky
-                              visibleButtons={
-                                region.isDefault ? (
-                                  <Badge variant="small" className="inline-grid">
-                                    Default
-                                  </Badge>
-                                ) : (
+                            {region.isDefault ? (
+                              <TableCell alignment="right">
+                                <Badge variant="small" className="inline-grid">
+                                  Default
+                                </Badge>
+                              </TableCell>
+                            ) : (
+                              <TableCellMenu
+                                className="pl-32"
+                                isSticky
+                                visibleButtons={
                                   <SetDefaultDialog regions={regions} newDefaultRegion={region} />
-                                )
-                              }
-                            />
+                                }
+                              />
+                            )}
                           </TableRow>
                         );
                       })
@@ -252,6 +254,7 @@ export default function Page() {
                       </TableCell>
                       <TableCellMenu
                         alignment="right"
+                        isSticky
                         visibleButtons={
                           <Feedback
                             button={
@@ -308,7 +311,7 @@ function SetDefaultDialog({
         </DialogHeader>
         <DialogDescription>
           <Paragraph>
-            Are you sure you want to set {newDefaultRegion.name} as your default region?
+            Are you sure you want to set {newDefaultRegion.name} as your new default region?
           </Paragraph>
 
           <div className="my-4 flex">