improvements: address feedback

frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx

@@ -27,11 +27,11 @@ export const OrgAlertBanner = ({ text, link }: Props) => {
             target="_blank"
             className="group flex items-center"
           >
-            <span className="cursor-pointer pl-1 text-yellow-500 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
+            <span className="cursor-pointer pl-1 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
               here
             </span>
             <FontAwesomeIcon
-              className="ml-0.5 mt-0.5 text-yellow group-hover:text-mineshaft-100"
+              className="ml-1 mt-[0.12rem] group-hover:text-mineshaft-100"
               icon={faArrowUpRightFromSquare}
               size="xs"
             />

frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx

@@ -5,16 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
+import { Button, FormControl, Input, Select, SelectClear, SelectItem, Switch, TextArea } from "@app/components/v2";
-  Button,
-  FormControl,
-  Input,
-  Select,
-  SelectClear,
-  SelectItem,
-  Switch,
-  TextArea
-} from "@app/components/v2";
 import { useServerConfig } from "@app/context";
 import { useGetOrganizations, useUpdateServerConfig } from "@app/hooks/api";
 
@@ -103,7 +94,7 @@ export const GeneralPageForm = () => {
 
   return (
     <form
-      className="space-y-8 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div className="flex flex-col justify-start">

frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx

@@ -19,6 +19,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import {
@@ -192,8 +193,13 @@ const ViewMembersModalContent = ({
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         placeholder="Search members..."
       />
-      <TableContainer className="mt-4 flex flex-1 flex-col rounded-b-none bg-mineshaft-700">
+      <TableContainer
-        <Table className="overflow-y-auto rounded-b-none bg-mineshaft-700">
+        className={twMerge(
+          "mt-4 flex flex-1 flex-col border border-mineshaft-500 bg-mineshaft-700",
+          Boolean(filteredMembers.length) && "rounded-b-none"
+        )}
+      >
+        <Table className="overflow-y-auto bg-mineshaft-700">
           <THead className="sticky top-0 z-50">
             <Tr>
               <Th className="w-1/3 border-none bg-mineshaft-700 p-0">
@@ -215,7 +221,7 @@ const ViewMembersModalContent = ({
                   </IconButton>
                 </div>
               </Th>
-              <Th className="w-1/2 border-none bg-mineshaft-700 p-0">
+              <Th className="w-1/3 border-none bg-mineshaft-700 p-0">
                 <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
                   Email
                   <IconButton
@@ -234,7 +240,7 @@ const ViewMembersModalContent = ({
                   </IconButton>
                 </div>
               </Th>
-              <Th className="w-1/5 border-none bg-mineshaft-700 p-0">
+              <Th className="w-1/4 border-none bg-mineshaft-700 p-0">
                 <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
                   Role
                 </div>
@@ -284,9 +290,9 @@ const ViewMembersModalContent = ({
                         )}
                     </div>
                   </Td>
-                  <Td>
+                  <Td className="max-w-0">
-                    <Badge className="flex w-min items-center gap-x-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-200">
+                    <Badge className="flex w-fit max-w-full items-center gap-x-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-200">
-                      <span className="capitalize">{member.role.replace("-", " ")}</span>
+                      <p className="truncate capitalize">{member.role.replace("-", " ")}</p>
                       {Boolean(member.roleId) && (
                         <Tooltip content="This member has a custom role assigned.">
                           <FontAwesomeIcon icon={faCircleQuestion} className="w-3" />
@@ -352,7 +358,7 @@ const ViewMembersModalContent = ({
       </TableContainer>
       {Boolean(filteredMembers.length) && (
         <Pagination
-          className="rounded-b-md bg-mineshaft-700"
+          className="rounded-b-md border border-t-0 bg-mineshaft-700"
           count={filteredMembers.length}
           page={page}
           perPage={perPage}