fix: setting pages responsiveness bugs

apps/web/app/(app)/environments/[environmentId]/settings/SettingsCard.tsx

@@ -18,7 +18,7 @@ export default function SettingsCard({
 }) {
   return (
     <div className="my-4 w-full bg-white shadow sm:rounded-lg">
-      <div className="rounded-t-lg border-b border-slate-200 bg-slate-100 px-6 py-5">
+      <div className="border-b border-slate-200 bg-slate-100 px-6 py-5">
         <div className="flex">
           <h3 className="text-lg font-medium leading-6 text-slate-900">{title}</h3>
           <div className="ml-2">

apps/web/app/(app)/environments/[environmentId]/settings/SettingsNavbar.tsx

@@ -223,7 +223,7 @@ export default function SettingsNavbar({ environmentId }: { environmentId: strin
           ))}
         </nav>
       </div>
-      <div className="fixed z-10 flex h-14 w-full items-center justify-between bg-white px-4 sm:hidden sm:px-6">
+      <div className="fixed z-10 flex h-14 w-full items-center justify-between border-b border-slate-200 bg-white px-4 sm:hidden sm:px-6">
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span className="flex items-center">
@@ -235,7 +235,7 @@ export default function SettingsNavbar({ environmentId }: { environmentId: strin
             <div className="flex flex-col">
               {navigation.map((item) => (
                 <div key={item.title}>
-                  <p className="mt-6 pl-3 pr-1 text-xs font-semibold uppercase tracking-wider text-slate-500">
+                  <p className="mt-3 pl-3 pr-1 text-xs font-semibold uppercase tracking-wider text-slate-500">
                     {item.title}{" "}
                     {item.title === "Product" && product?.name && (
                       <span className="font-normal capitalize">({truncate(product?.name, 10)})</span>

apps/web/app/(app)/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx

@@ -60,10 +60,10 @@ export default function EditAPIKeys({
       </div>
       <div className="rounded-lg border border-slate-200">
         <div className="grid h-12 grid-cols-9 content-center rounded-t-lg bg-slate-100 px-6 text-left text-sm font-semibold text-slate-900">
-          <div className="col-span-2">Label</div>
-          <div className="col-span-2">API Key</div>
-          <div className="col-span-2">Last used</div>
-          <div className="col-span-2">Created at</div>
+          <div className="col-span-4 sm:col-span-2">Label</div>
+          <div className="col-span-4 hidden sm:col-span-2 sm:block">API Key</div>
+          <div className="col-span-4 hidden sm:col-span-2 sm:block">Last used</div>
+          <div className="col-span-4 sm:col-span-2">Created at</div>
           <div className=""></div>
         </div>
         <div className="grid-cols-9">
@@ -77,12 +77,14 @@ export default function EditAPIKeys({
               <div
                 className="grid h-12 w-full grid-cols-9 content-center rounded-lg px-6 text-left text-sm text-slate-900"
                 key={apiKey.hashedKey}>
-                <div className="col-span-2 font-semibold">{apiKey.label}</div>
-                <div className="col-span-2">{apiKey.apiKey || <span className="italic">secret</span>}</div>
-                <div className="col-span-2">
+                <div className="col-span-4 font-semibold sm:col-span-2">{apiKey.label}</div>
+                <div className="col-span-4 hidden sm:col-span-2 sm:block">
+                  {apiKey.apiKey || <span className="italic">secret</span>}
+                </div>
+                <div className="col-span-4 hidden sm:col-span-2 sm:block">
                   {apiKey.lastUsedAt && timeSince(apiKey.lastUsedAt.toString())}
                 </div>
-                <div className="col-span-2">{timeSince(apiKey.createdAt.toString())}</div>
+                <div className="col-span-4 sm:col-span-2">{timeSince(apiKey.createdAt.toString())}</div>
                 <div className="col-span-1 text-center">
                   <button onClick={(e) => handleOpenDeleteKeyModal(e, apiKey)}>
                     <TrashIcon className="h-5 w-5 text-slate-700 hover:text-slate-500" />

apps/web/app/(app)/environments/[environmentId]/settings/members/EditMemberships.tsx

@@ -273,7 +273,7 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
         )}
         <Button
           variant="secondary"
-          className="mr-2"
+          className="mr-2 hidden sm:inline-flex"
           onClick={() => {
             setCreateTeamModalOpen(true);
           }}>
@@ -292,26 +292,26 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
       <div className="rounded-lg border border-slate-200">
         <div className="grid-cols-20 grid h-12 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
           <div className="col-span-2"></div>
-          <div className="col-span-5">Fullname</div>
+          <div className="hidden sm:col-span-5 sm:block">Fullname</div>
           <div className="col-span-5">Email</div>
-          <div className="col-span-3">Role</div>
-          <div className="col-span-5"></div>
+          <div className="hidden sm:col-span-3 sm:block">Role</div>
+          <div className="hidden sm:col-span-5 sm:block"></div>
         </div>
         <div className="grid-cols-20">
           {[...team.members, ...team.invitees].map((member) => (
             <div
               className="grid-cols-20 grid h-auto w-full content-center rounded-lg p-0.5 py-2 text-left text-sm text-slate-900"
               key={member.email}>
-              <div className="h-58 col-span-2 pl-4">
+              <div className="h-58 col-span-2 hidden pl-4 sm:block">
                 <ProfileAvatar userId={member.userId || member.email} />
               </div>
-              <div className="ph-no-capture col-span-5 flex flex-col justify-center break-all">
+              <div className="ph-no-capture col-span-5 hidden flex-col justify-center break-all sm:flex">
                 <p>{member.name}</p>
               </div>
-              <div className="ph-no-capture col-span-5  flex flex-col justify-center break-all">
+              <div className="ph-no-capture col-span-5 flex flex-col justify-center break-all">
                 {member.email}
               </div>
-              <div className="ph-no-capture col-span-3 flex flex-col items-start justify-center break-all">
+              <div className="ph-no-capture col-span-3 hidden flex-col items-start justify-center break-all sm:flex">
                 <RoleElement
                   isAdminOrOwner={isAdminOrOwner}
                   memberRole={member.role}
@@ -325,7 +325,7 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
                   currentUserRole={role}
                 />
               </div>
-              <div className="col-span-5 flex items-center justify-end gap-x-4 pr-4">
+              <div className="col-span-5 ml-48 flex items-center justify-end gap-x-2 pr-4 sm:ml-0 sm:gap-x-4">
                 {!member.accepted &&
                   (isExpired(member) ? (
                     <Badge className="mr-2" type="gray" text="Expired" size="tiny" />

apps/web/app/(app)/environments/[environmentId]/settings/notifications/EditAlerts.tsx

@@ -22,20 +22,21 @@ export default function EditAlerts({ memberships, user, environmentId }: EditAle
             <p className="text-slate-800">{membership.team.name}</p>
           </div>
           <div className="mb-6 rounded-lg border border-slate-200">
-            <div className="grid h-12 grid-cols-4 content-center rounded-t-lg bg-slate-100 px-4 text-left text-sm font-semibold text-slate-900">
-              <div className="col-span-2">Survey</div>
-              <div className="col-span-1">Product</div>
+            <div className="grid h-12 grid-cols-3 content-center rounded-t-lg bg-slate-100 px-4 text-left text-sm font-semibold text-slate-900">
+              <div className="col-span-2 flex items-center">Survey</div>
               <TooltipProvider delayDuration={50}>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className="col-span-1 cursor-default text-center">
-                      Every Response <QuestionMarkCircleIcon className="mb-1 inline h-4 w-4 text-slate-500" />
+                    <div className="col-span-1 flex cursor-default items-center justify-center">
+                      <span className="">Every Response</span>
+                      <QuestionMarkCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>Sends complete responses, no partials.</TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             </div>
+
             {membership.team.products.some((product) =>
               product.environments.some((environment) => environment.surveys.length > 0)
             ) ? (
@@ -46,13 +47,11 @@ export default function EditAlerts({ memberships, user, environmentId }: EditAle
                       <div key={environment.id}>
                         {environment.surveys.map((survey) => (
                           <div
-                            className="grid h-auto w-full cursor-pointer grid-cols-4 place-content-center rounded-lg px-2 py-2 text-left text-sm text-slate-900 hover:bg-slate-50"
+                            className="grid h-auto w-full cursor-pointer grid-cols-3 place-content-center rounded-lg px-2 py-2 text-left text-sm text-slate-900 hover:bg-slate-50"
                             key={survey.name}>
-                            <div className=" col-span-2 flex items-center ">
-                              <p className="text-slate-800">{survey.name}</p>
-                            </div>
-                            <div className="col-span-1 flex flex-col justify-center break-all">
-                              {product?.name}
+                            <div className="col-span-2 text-left">
+                              <div className="font-medium text-slate-900">{survey.name}</div>
+                              <div className="text-xs text-slate-400">{product.name}</div>
                             </div>
                             <div className="col-span-1 text-center">
                               <NotificationSwitch

apps/web/app/(app)/environments/[environmentId]/settings/notifications/EditWeeklySummary.tsx

@@ -21,17 +21,17 @@ export default function EditWeeklySummary({ memberships, user, environmentId }:
             <p className="text-slate-800">{membership.team.name}</p>
           </div>
           <div className="mb-6 rounded-lg border border-slate-200">
-            <div className="grid h-12 grid-cols-2 content-center rounded-t-lg bg-slate-100 px-4 text-left text-sm font-semibold text-slate-900">
-              <div>Product</div>
-              <div className="cursor-default pr-12 text-right">Weekly Summary</div>
+            <div className="grid h-12 grid-cols-3 content-center rounded-t-lg bg-slate-100 px-4 text-left text-sm font-semibold text-slate-900">
+              <div className="col-span-2">Product</div>
+              <div className="col-span-1 text-center">Weekly Summary</div>
             </div>
-            <div className="grid-cols-8 space-y-1 p-2">
+            <div className="space-y-1 p-2">
               {membership.team.products.map((product) => (
                 <div
-                  className="grid h-auto w-full cursor-pointer grid-cols-2 place-content-center rounded-lg px-2 py-2 text-left text-sm text-slate-900 hover:bg-slate-50"
+                  className="grid h-auto w-full cursor-pointer grid-cols-3 place-content-center justify-center rounded-lg px-2 py-2 text-left text-sm text-slate-900 hover:bg-slate-50"
                   key={product.id}>
-                  <div>{product?.name}</div>
-                  <div className="mr-20 flex justify-end">
+                  <div className="col-span-2">{product?.name}</div>
+                  <div className="col-span-1 flex items-center justify-center">
                     <NotificationSwitch
                       surveyOrProductId={product.id}
                       userId={user.id}