From fc595bd799639cd7a6a8db6186acb95eb1c0b6da Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 30 Mar 2024 14:25:38 -0500
Subject: [PATCH] Updates to authentication page for mobile screen sizes

---
 client/components/app/SettingsContent.vue |  2 +-
 client/pages/config/authentication.vue    | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
index ec129ebc..40b0c02f 100644
--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-2 sm:p-4 mb-8">
     <div class="flex items-center mb-2">
       <slot name="header-prefix"></slot>
       <h1 class="text-xl">{{ headerText }}</h1>
diff --git a/client/pages/config/authentication.vue b/client/pages/config/authentication.vue
index 9f2e71ec..a85433c5 100644
--- a/client/pages/config/authentication.vue
+++ b/client/pages/config/authentication.vue
@@ -59,15 +59,15 @@
             <ui-text-input-with-label ref="openidClientSecret" v-model="newAuthSettings.authOpenIDClientSecret" :disabled="savingSettings" :label="'Client Secret'" class="mb-2" />
 
             <ui-multi-select ref="redirectUris" v-model="newAuthSettings.authOpenIDMobileRedirectURIs" :items="newAuthSettings.authOpenIDMobileRedirectURIs" :label="$strings.LabelMobileRedirectURIs" class="mb-2" :menuDisabled="true" :disabled="savingSettings" />
-            <p class="pl-4 text-sm text-gray-300 mb-2" v-html="$strings.LabelMobileRedirectURIsDescription" />
+            <p class="sm:pl-4 text-sm text-gray-300 mb-2" v-html="$strings.LabelMobileRedirectURIsDescription" />
 
             <ui-text-input-with-label ref="buttonTextInput" v-model="newAuthSettings.authOpenIDButtonText" :disabled="savingSettings" :label="$strings.LabelButtonText" class="mb-2" />
 
-            <div class="flex items-center pt-1 mb-2">
+            <div class="flex sm:items-center flex-col sm:flex-row pt-1 mb-2">
               <div class="w-44">
                 <ui-dropdown v-model="newAuthSettings.authOpenIDMatchExistingBy" small :items="matchingExistingOptions" :label="$strings.LabelMatchExistingUsersBy" :disabled="savingSettings" />
               </div>
-              <p class="pl-4 text-sm text-gray-300 mt-5">{{ $strings.LabelMatchExistingUsersByDescription }}</p>
+              <p class="sm:pl-4 text-sm text-gray-300 mt-2 sm:mt-5">{{ $strings.LabelMatchExistingUsersByDescription }}</p>
             </div>
 
             <div class="flex items-center py-4 px-1 w-full">
@@ -84,18 +84,18 @@
 
             <p class="pt-6 mb-4 px-1">{{ $strings.LabelOpenIDClaims }}</p>
 
-            <div class="flex mb-4">
+            <div class="flex flex-col sm:flex-row mb-4">
               <div class="w-44 min-w-44">
                 <ui-text-input-with-label ref="openidGroupClaim" v-model="newAuthSettings.authOpenIDGroupClaim" :disabled="savingSettings" :placeholder="'groups'" :label="'Group Claim'" />
               </div>
-              <p class="pl-4 text-sm text-gray-300" v-html="$strings.LabelOpenIDGroupClaimDescription"></p>
+              <p class="sm:pl-4 pt-2 sm:pt-0 text-sm text-gray-300" v-html="$strings.LabelOpenIDGroupClaimDescription"></p>
             </div>
 
-            <div class="flex mb-4">
+            <div class="flex flex-col sm:flex-row mb-4">
               <div class="w-44 min-w-44">
                 <ui-text-input-with-label ref="openidAdvancedPermsClaim" v-model="newAuthSettings.authOpenIDAdvancedPermsClaim" :disabled="savingSettings" :placeholder="'abspermissions'" :label="'Advanced Permission Claim'" />
               </div>
-              <div class="pl-4 text-sm text-gray-300 flex-column">
+              <div class="sm:pl-4 pt-2 sm:pt-0 text-sm text-gray-300">
                 <p v-html="$strings.LabelOpenIDAdvancedPermsClaimDescription"></p>
                 <pre class="text-pre-wrap mt-2"
                   >{{ newAuthSettings.authOpenIDSamplePermissions }}