fix: Optimize UI for smaller screens (#1220)

keep-ui/app/alerts/alert-presets.tsx

@@ -254,7 +254,7 @@ export default function AlertPresets({
           </div>
         </div>
       </Modal>
-      <div className="flex w-full items-start mt-6">
+      <div className="flex w-full items-start xl:mt-6">
         <AlertsRulesBuilder
           table={table}
           defaultQuery=""

keep-ui/app/alerts/alert-table.tsx

@@ -172,7 +172,7 @@ export function AlertTable({
   };
 
   return (
-    <div className="flex flex-col h-full overflow-hidden">
+    <div className="flex flex-col h-full">
       <TitleAndFilters
         table={table}
         alerts={alerts}

keep-ui/app/alerts/alerts-rules-builder.tsx

@@ -590,7 +590,7 @@ export const AlertsRulesBuilder = ({
 
       {/* Docs */}
       <div className="flex flex-wrap items-center gap-x-2">
-        <div className="flex items-center space-x-2 relative flex-grow">
+        <div className="flex flex-wrap gap-2 items-center relative flex-grow">
           {/* CEL badge and (i) icon container */}
           <div className="flex items-center space-x-2">
             <Badge

keep-ui/app/dashboard/[id]/dashboard.tsx

@@ -141,7 +141,7 @@ const DashboardPage = () => {
   };
 
   return (
-    <div className="flex flex-col h-full p-4">
+    <div className="flex flex-col h-full">
       <div className="flex items-center justify-between mb-4">
         <div className="relative">
           {isEditingName ? (

keep-ui/app/extraction/extraction.tsx

@@ -13,7 +13,7 @@ export default function Extraction() {
   const [extractionToEdit, setExtractionToEdit] =
     useState<ExtractionRule | null>(null);
   return (
-    <Card className="p-4 md:p-10 mx-auto">
+    <Card className="card-container">
       <div className="flex divide-x p-2">
         <div className="w-1/3 pr-2.5">
           <CreateOrUpdateExtractionRule
@@ -37,7 +37,7 @@ export default function Extraction() {
             >
               <p className="text-slate-400">No extraction rules found.</p>
               <p className="text-slate-400">
-                Configure new extraction rule using the extration rules wizard
+                Configure new extraction rule using the extraction rules wizard
                 to the left.
               </p>
             </Callout>

keep-ui/app/extraction/layout.tsx

@@ -1,3 +1,3 @@
 export default function Layout({ children }: { children: any }) {
-  return <main className="p-4 md:p-10 mx-auto max-w-full">{children}</main>;
+  return <main>{children}</main>;
 }

keep-ui/app/globals.css

@@ -22,6 +22,20 @@
   animation: spin 2s linear infinite;
 }
 
+.page-container {
+  @apply p-4 mx-auto w-full;
+  @screen xl {
+    @apply p-10;
+  }
+}
+
+.card-container {
+  @apply p-4 mx-auto;
+  @screen xl {
+    @apply p-10;
+  }
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

keep-ui/app/incidents/[id]/incident.tsx

@@ -49,11 +49,11 @@ export default function IncidentView({ incidentId }: Props) {
       </div>
       <Card className="flex flex-col items-center justify-center gap-y-8 mt-10 p-4 md:p-10 mx-auto">
         <div className="w-full">
-          <div className="flex divide-x p-2">
-            <div id="incidentOverview" className="w-2/5 min-w-[400px] pr-2.5">
+          <div className="flex flex-col gap-2 xl:gap-0 xl:flex-row xl:divide-x p-2">
+            <div id="incidentOverview" className="w-2/5 min-w-[400px] xl:pr-2.5">
               <IncidentInformation incident={incident} />
             </div>
-            <div id="incidentTabs" className="w-full pl-2.5 overflow-x-scroll">
+            <div id="incidentTabs" className="w-full xl:pl-2.5 overflow-x-scroll">
               <TabGroup defaultIndex={0}>
                 <TabList variant="line" color="orange">
                   <Tab>Alerts</Tab>

keep-ui/app/incidents/[id]/layout.tsx

@@ -1,3 +1,3 @@
 export default function Layout({ children }: { children: any }) {
-  return <main className="p-4 md:p-10 mx-auto max-w-full">{children}</main>;
+  return <main>{children}</main>;
 }

keep-ui/app/incidents/incident.tsx

@@ -56,7 +56,7 @@ export default function Incident() {
 
   return (
     <div className="flex h-full w-full">
-      <div className="flex-grow overflow-auto p-2.5">
+      <div className="flex-grow min-w-0">
         {!isPredictedLoading &&
         predictedIncidents &&
         predictedIncidents.items.length > 0 ? (

keep-ui/app/layout.tsx

@@ -26,7 +26,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
           {/* @ts-ignore-error Server Component */}
           <Navbar />
           {/* https://discord.com/channels/752553802359505017/1068089513253019688/1117731746922893333 */}
-          <main className="flex flex-col col-start-3 p-4 overflow-auto">
+          <main className="page-container flex flex-col col-start-3 overflow-auto">
             <div className="flex-1">
               {children}
             </div>

keep-ui/app/mapping/layout.tsx

@@ -1,3 +1,3 @@
 export default function Layout({ children }: { children: any }) {
-  return <main className="p-4 md:p-10 mx-auto max-w-full">{children}</main>;
+  return <main>{children}</main>;
 }

keep-ui/app/mapping/mapping.tsx

@@ -15,7 +15,7 @@ export default function Mapping() {
   const [editRule, setEditRule] = useState<MappingRule | null>(null);
 
   return (
-    <Card className="p-4 md:p-10 mx-auto">
+    <Card className="card-container">
       <div className="flex divide-x p-2">
         <div className="w-1/3 pr-2.5">
           <h2 className="text-lg">Configure</h2>

keep-ui/app/providers/provider-form.tsx

@@ -690,7 +690,7 @@ const ProviderForm = ({
   const groupedConfigs = groupConfigsByMainGroup(provider.config);
   console.log("ProviderForm component loaded");
   return (
-    <div className="flex flex-col h-full justify-between p-5">
+    <div className="flex flex-col justify-between p-5">
       <div>
         <div className="flex flex-row">
           <Title>Connect to {provider.display_name}</Title>

keep-ui/app/providers/provider-tile.css

@@ -2,20 +2,20 @@
   flex-basis: calc(14.285% - 1.25rem);
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 700px) {
   /* For mobile phones: */
   .tile-basis {
     flex-basis: calc(100% - 1.25rem);
   }
 }
 
-@media only screen and (min-width: 600px) and (max-width: 1024px) {
+@media only screen and (min-width: 700px) and (max-width: 1280px) {
   .tile-basis {
     flex-basis: calc(33.333333% - 1.25rem);
   }
 }
 
-@media only screen and (min-width: 1024px) and (max-width: 2048px) {
+@media only screen and (min-width: 1280px) and (max-width: 2048px) {
   .tile-basis {
     flex-basis: calc(25% - 1.25rem);
   }

keep-ui/app/providers/provider-tile.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   Title,
 } from "@tremor/react";
-import { Provider } from "./providers";
+import {Provider, TProviderLabels} from "./providers";
 import {
   BellAlertIcon,
   ChatBubbleBottomCenterIcon,
@@ -88,13 +88,51 @@ const getEmptyDistribution = () => {
   return emptyDistribution;
 };
 
+
+function getIconForTag(tag:TProviderLabels) {
+  switch (tag) {
+    case "alert":
+      return BellAlertIcon;
+    case "data":
+      return CircleStackIcon;
+    case "ticketing":
+      return TicketIcon;
+    case "queue":
+      return QueueListIcon;
+    case "topology":
+      return MapIcon;
+    default:
+      return ChatBubbleBottomCenterIcon;
+  }
+}
+
 export default function ProviderTile({ provider, onClick }: Props) {
+  const renderTags = () => {
+    if (provider.installed || provider.linked) {
+      return null;
+    }
+    return (<div className="labels flex flex-wrap group-hover:hidden gap-1">
+              {provider.tags.map((tag) => {
+                  return (
+                    <Badge
+                      key={tag}
+                      icon={getIconForTag(tag)}
+                      size="xs"
+                      color="slate"
+                    >
+                      <p>{tag}</p>
+                    </Badge>
+                  );
+                })}
+            </div>)
+  }
+
   return (
     <div
-      className="tile-basis relative group flex justify-around items-center bg-white rounded-lg shadow h-44 hover:shadow-lg hover:grayscale-0 cursor-pointer"
+      className="tile-basis py-2 px-4 relative group flex justify-around items-center bg-white rounded-lg shadow h-44 hover:shadow-lg hover:grayscale-0 cursor-pointer gap-2"
       onClick={onClick}
     >
-      <div className="w-48">
+      <div className="flex-1 min-w-0">
         {(provider.can_setup_webhook || provider.supports_webhook) &&
           !provider.installed &&
           !provider.linked && (
@@ -129,7 +167,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
             Linked
           </Text>
         ) : null}
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-2">
           <div>
             <Title
               className={`${
@@ -156,9 +194,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
             )}
             {provider.linked && provider.id ? (
               <Text className="truncate">Id: {provider.id}</Text>
-            ) : (
-              <br></br>
-            )}
+            ) : null}
             {(provider.installed || provider.linked) &&
             provider.alertsDistribution &&
             provider.alertsDistribution.length > 0 ? (
@@ -187,35 +223,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
               />
             ) : null}
           </div>
-          <div className="labels flex group-hover:hidden">
-            {!provider.installed &&
-              !provider.linked &&
-              provider.tags.map((tag) => {
-                const icon =
-                  tag === "alert"
-                    ? BellAlertIcon
-                    : tag === "data"
-                    ? CircleStackIcon
-                    : tag === "ticketing"
-                    ? TicketIcon
-                    : tag === "queue"
-                    ? QueueListIcon
-                    : tag === "topology"
-                    ? MapIcon
-                    : ChatBubbleBottomCenterIcon;
-                return (
-                  <Badge
-                    key={tag}
-                    icon={icon}
-                    size="xs"
-                    className="mr-1"
-                    color="slate"
-                  >
-                    <p className="ml-1">{tag}</p>
-                  </Badge>
-                );
-              })}
-          </div>
+          {renderTags()}
           {!provider.linked && (
             <Button
               variant="secondary"

keep-ui/app/rules/CorrelationPlaceholder.tsx

@@ -27,7 +27,7 @@ export const CorrelationPlaceholder = () => {
         >
           Create Correlation
         </Button>
-        <PlaceholderSankey />
+        <PlaceholderSankey className="max-w-full" />
       </Card>
       <CorrelationSidebar
         isOpen={isSidebarOpen}

keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx

@@ -124,7 +124,7 @@ export const CorrelationSidebarBody = ({
       />
       <FormProvider {...methods}>
         <form
-          className="grid grid-cols-2 gap-x-10 flex-1"
+          className="grid grid-cols-1 xl:grid-cols-2 gap-x-10 flex-1"
           onSubmit={methods.handleSubmit(onCorrelationFormSubmit)}
         >
           <CorrelationForm alertsFound={alertsFound} isLoading={isLoading} />

keep-ui/app/rules/CorrelationSidebar/CorrelationSubmission.tsx

@@ -26,7 +26,7 @@ export const CorrelationSubmission = ({
   const isRuleBeingEdited = searchParams ? searchParams.get("id") : null;
 
   return (
-    <div className="col-span-2 flex justify-between items-end">
+    <div className="xl:col-span-2 flex justify-between items-end">
       <div>
         {alertsFound.length > 0 && (
           <AlertsFoundBadge alertsFound={alertsFound} isLoading={false} />

keep-ui/app/rules/PlaceholderSankey.tsx

@@ -1,11 +1,14 @@
-export const PlaceholderSankey = (props: any) => (
+import {SVGProps} from "react";
+
+export const PlaceholderSankey = (props: SVGProps<SVGSVGElement>) => (
   <svg
     width="962"
     height="419"
     viewBox="0 0 962 419"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
   >
     <path
       d="M498.554 1.81818V12H497.321V3.1108H497.262L494.776 4.76136V3.50852L497.321 1.81818H498.554ZM504.863 12.1392C504.446 12.1326 504.028 12.053 503.611 11.9006C503.193 11.7481 502.812 11.4912 502.467 11.13C502.122 10.7654 501.846 10.2732 501.637 9.65341C501.428 9.0303 501.324 8.24811 501.324 7.30682C501.324 6.4053 501.408 5.60653 501.577 4.91051C501.746 4.21117 501.991 3.62287 502.313 3.1456C502.634 2.66501 503.022 2.30043 503.476 2.05185C503.934 1.80327 504.449 1.67898 505.022 1.67898C505.593 1.67898 506.1 1.79332 506.544 2.02202C506.991 2.2474 507.356 2.56226 507.638 2.96662C507.919 3.37098 508.102 3.83665 508.184 4.36364H506.971C506.859 3.90625 506.64 3.52675 506.315 3.22514C505.99 2.92353 505.559 2.77273 505.022 2.77273C504.234 2.77273 503.612 3.11577 503.158 3.80185C502.707 4.48793 502.48 5.45076 502.477 6.69034H502.557C502.742 6.40862 502.963 6.16832 503.218 5.96946C503.476 5.76728 503.761 5.61151 504.073 5.50213C504.384 5.39276 504.714 5.33807 505.062 5.33807C505.646 5.33807 506.179 5.4839 506.663 5.77557C507.147 6.06392 507.535 6.4633 507.826 6.97372C508.118 7.48082 508.264 8.0625 508.264 8.71875C508.264 9.34848 508.123 9.92519 507.841 10.4489C507.56 10.9692 507.164 11.3835 506.653 11.6918C506.146 11.9967 505.549 12.1458 504.863 12.1392ZM504.863 11.0455C505.281 11.0455 505.656 10.9411 505.987 10.7322C506.322 10.5234 506.585 10.2434 506.777 9.89205C506.973 9.54072 507.071 9.14962 507.071 8.71875C507.071 8.29782 506.976 7.91501 506.787 7.57031C506.602 7.2223 506.345 6.94555 506.017 6.74006C505.692 6.53456 505.321 6.43182 504.903 6.43182C504.588 6.43182 504.295 6.49479 504.023 6.62074C503.751 6.74337 503.513 6.91241 503.307 7.12784C503.105 7.34328 502.946 7.5902 502.83 7.86861C502.714 8.1437 502.656 8.43371 502.656 8.73864C502.656 9.14299 502.75 9.52083 502.939 9.87216C503.132 10.2235 503.393 10.5069 503.725 10.7223C504.06 10.9377 504.439 11.0455 504.863 11.0455ZM513.659 12.1392C513.003 12.1392 512.418 12.0265 511.904 11.8011C511.394 11.5758 510.988 11.2625 510.686 10.8615C510.388 10.4571 510.226 9.98816 510.199 9.45455H511.452C511.478 9.78267 511.591 10.0661 511.79 10.3047C511.989 10.54 512.249 10.7223 512.571 10.8516C512.892 10.9808 513.248 11.0455 513.639 11.0455C514.077 11.0455 514.465 10.9692 514.803 10.8168C515.141 10.6643 515.406 10.4522 515.598 10.1804C515.791 9.90862 515.887 9.59375 515.887 9.2358C515.887 8.86127 515.794 8.53149 515.608 8.24645C515.423 7.9581 515.151 7.73272 514.793 7.57031C514.435 7.40791 513.997 7.3267 513.48 7.3267H512.665V6.23295H513.48C513.885 6.23295 514.239 6.16004 514.544 6.0142C514.853 5.86837 515.093 5.66288 515.265 5.39773C515.441 5.13258 515.529 4.82102 515.529 4.46307C515.529 4.11837 515.452 3.81842 515.3 3.56321C515.148 3.308 514.932 3.10914 514.654 2.96662C514.379 2.8241 514.054 2.75284 513.679 2.75284C513.328 2.75284 512.996 2.81747 512.685 2.94673C512.377 3.07268 512.125 3.25663 511.929 3.49858C511.734 3.73722 511.628 4.02557 511.611 4.36364H510.418C510.438 3.83002 510.599 3.36269 510.9 2.96165C511.202 2.55729 511.596 2.24242 512.083 2.01705C512.574 1.79167 513.112 1.67898 513.699 1.67898C514.329 1.67898 514.869 1.80658 515.32 2.06179C515.771 2.31368 516.117 2.64678 516.359 3.06108C516.601 3.47538 516.722 3.92282 516.722 4.40341C516.722 4.9768 516.571 5.46567 516.269 5.87003C515.971 6.27438 515.565 6.55445 515.051 6.71023V6.78977C515.694 6.89583 516.197 7.16927 516.558 7.61009C516.919 8.04759 517.1 8.58949 517.1 9.2358C517.1 9.7893 516.949 10.2865 516.647 10.7273C516.349 11.1648 515.941 11.5095 515.424 11.7614C514.907 12.0133 514.319 12.1392 513.659 12.1392Z"

keep-ui/app/settings/layout.tsx

@@ -3,10 +3,10 @@ import { Card, Title, Subtitle } from "@tremor/react";
 export default function Layout({ children }: { children: any }) {
   return (
     <>
-      <main className="p-4 md:p-10 mx-auto max-w-7xl">
+      <main className="p-4 mx-auto max-w-7xl">
         <Title>Settings</Title>
         <Subtitle>Setup and configure Keep</Subtitle>
-        <Card className="mt-10 p-4 md:p-10 mx-auto">{children}</Card>
+        <Card className="card-container mt-10">{children}</Card>
       </main>
     </>
   );

keep-ui/app/settings/smtp-settings.tsx

@@ -229,7 +229,7 @@ export default function SMTPSettingsForm({ accessToken, selectedTab }: Props) {
   };
 
   return (
-    <div className="p-6">
+    <div className="mt-10">
       <Title>SMTP Settings</Title>
       <Subtitle>Configure your SMTP server to send emails</Subtitle>
       <Card className="mt-4 p-4">

keep-ui/app/settings/webhook-settings.tsx

@@ -86,8 +86,7 @@ export default function WebhookSettings({ accessToken, selectedTab }: Props) {
     {
       title: "Python",
       language: "python",
-      code: `
-import requests
+      code: `import requests
 
 response = requests.post("https://api.keephq.dev/alerts/event",
 headers={
@@ -101,8 +100,7 @@ json=${exampleJson})
     {
       title: "Node",
       language: "javascript",
-      code: `
-const https = require('https');
+      code: `const https = require('https');
 
 const data = JSON.stringify(${exampleJson});
 
@@ -185,7 +183,7 @@ req.end();
             </div>
           </div>
           <TabGroup
-            className="flex-1 pl-2"
+            className="flex-1 min-w-0 pl-2"
             index={codeTabIndex}
             onIndexChange={setCodeTabIndex}
           >

keep-ui/app/workflows/mockworkflows.tsx

@@ -151,7 +151,7 @@ export default function MockWorkflowCardSection({
             return (
               <Card
                 key={index}
-                className="p-4 flex flex-col justify-between w-full hover:border-orange-400 border-2 border-white"
+                className="p-4 flex flex-col justify-between w-full border-2 border-transparent hover:border-orange-400 "
               >
                 <div>
                   <WorkflowSteps workflow={workflow} />