fix(ui): providers responsiveness (#589)

Author: talboren

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

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

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

@@ -1,11 +1,4 @@
-import {
-  Badge,
-  Button,
-  Icon,
-  Subtitle,
-  Text,
-  Title,
-} from "@tremor/react";
+import { Badge, Button, Icon, Subtitle, Text, Title } from "@tremor/react";
 import { Provider } from "./providers";
 import Image from "next/image";
 import {
@@ -15,6 +8,7 @@ import {
   QueueListIcon,
   TicketIcon,
 } from "@heroicons/react/20/solid";
+import "./provider-tile.css";
 
 interface Props {
   provider: Provider;
@@ -67,7 +61,7 @@ const OAuthIcon = (props: any) => (
 export default function ProviderTile({ provider, onClick }: Props) {
   return (
     <div
-      className="relative flex-grow group flex justify-around items-center bg-white rounded-lg shadow w-80 max-w-xs h-44 hover:shadow-lg hover:grayscale-0 cursor-pointer"
+      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"
       onClick={onClick}
     >
       <div className="w-32">

keep-ui/app/providers/providers-tiles.css

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import SlidingPanel from "react-sliding-side-panel";
 import ProviderForm from "./provider-form";
 import ProviderTile from "./provider-tile";
-import "./providers-tiles.css";
 import "react-sliding-side-panel/lib/index.css";
 import { useSearchParams } from "next/navigation";
 import { hideOrShowIntercom } from "@/components/ui/Intercom";
@@ -112,7 +111,7 @@ const ProvidersTiles = ({
       <Title className="mb-2.5">
         {installedProvidersMode ? "Installed Providers" : "Available Providers"}
       </Title>
-      <div className="provider-tiles mb-5">
+      <div className="flex flex-wrap mb-5 gap-5">
         {providersWithConfig.map((provider, index) => (
           <ProviderTile
             key={provider.id}