From fb042a36b68ff037ab6940f924eb122fa48b3e02 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 9 May 2022 12:43:27 +0100
Subject: [PATCH] Fix Mobile UI for /settings/security (#2703)

* Fix Mobile UI

* Remove truncate

* Move buttons

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/security/ChangePasswordSection.tsx | 8 ++++----
 apps/web/components/security/TwoFactorAuthSection.tsx  | 4 ++--
 apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx
index 3c8684ad..3b8562cf 100644
--- a/apps/web/components/security/ChangePasswordSection.tsx
+++ b/apps/web/components/security/ChangePasswordSection.tsx
@@ -61,8 +61,8 @@ const ChangePasswordSection = () => {
           <div className="my-3">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
           </div>
-          <div className="flex">
-            <div className="w-1/2 ltr:mr-2 rtl:ml-2">
+          <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
+            <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
               <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
                 {t("current_password")}
               </label>
@@ -79,7 +79,7 @@ const ChangePasswordSection = () => {
                 />
               </div>
             </div>
-            <div className="ml-2 w-1/2">
+            <div className="w-full sm:w-1/2">
               <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
                 {t("new_password")}
               </label>
@@ -98,7 +98,7 @@ const ChangePasswordSection = () => {
             </div>
           </div>
           {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
-          <div className="flex justify-end py-8">
+          <div className="flex py-8 sm:justify-end">
             <Button color="secondary" type="submit">
               {t("save")}
             </Button>
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index 72aaeb88..b21273fd 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -17,7 +17,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
 
   return (
     <>
-      <div className="flex flex-row justify-between truncate pt-9 pl-2">
+      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
@@ -27,7 +27,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
           </div>
           <p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
         </div>
-        <div className="self-center">
+        <div className="mt-5 sm:mt-0 sm:self-center">
           <Button
             type="submit"
             color="secondary"
diff --git a/apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx b/apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx
index d4305406..72f175d2 100644
--- a/apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx
+++ b/apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx
@@ -24,12 +24,12 @@ export default function ApiKeyListContainer() {
       query={query}
       success={({ data }) => (
         <>
-          <div className="flex flex-row justify-between truncate pl-2 pr-1 ">
+          <div className=" flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
             <div className="mt-9">
               <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
               <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
             </div>
-            <div className="self-center">
+            <div className="mb-9 sm:self-center">
               <Button StartIcon={PlusIcon} color="secondary" onClick={() => setNewApiKeyModal(true)}>
                 {t("generate_new_api_key")}
               </Button>