From 4dc56479aecc58daf5432ebd12524ab72ebb03ee Mon Sep 17 00:00:00 2001
From: Kyrylo Petrov <kpetrov@exoft.net>
Date: Thu, 27 Mar 2025 14:14:47 +0200
Subject: [PATCH] chore(profile-settings): name ands social responsivness

---
 .../profile-settings.component.html           | 62 ++++++++++++-------
 .../profile-settings.component.ts             |  2 +-
 .../styles/overrides/input-group-addon.scss   |  6 ++
 src/assets/styles/overrides/input.scss        |  8 +++
 4 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html
index d01fe042c..6e60bf7a1 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.html
+++ b/src/app/features/settings/profile-settings/profile-settings.component.html
@@ -13,10 +13,10 @@
       <p-tab [value]="3">Education</p-tab>
     </p-tablist>
 
-    <p-tabpanels class="p-5 flex-1">
+    <p-tabpanels class="p-3 sm:p-5 flex-1">
       <!--NAME-->
       <p-tabpanel [value]="0" class="flex flex-column gap-4 flex-1">
-        <div class="border-1 border-round-lg p-4 name-container">
+        <div class="border-1 border-round-lg p-3 sm:p-5 name-container">
           <h3 class="font-normal">
             Your full name is the name that will be displayed in your profile.
             To control the way your name will appear in citations, you can use
@@ -24,45 +24,61 @@ <h3 class="font-normal">
             name, etc., or edit the fields directly below.
           </h3>
           <div class="flex flex-column row-gap-4 mt-4">
-            <div class="flex flex-row column-gap-3 w-full align-items-end">
-              <div class="w-6">
-                <label for="full-name" class="font-light">Full Name</label>
+            <div
+              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3 w-full mb-3"
+            >
+              <div class="w-full xl:w-6">
+                <label for="full-name" class="font-normal xl:font-light"
+                  >Full Name</label
+                >
                 <input pInputText id="full-name" class="name-input" />
               </div>
-              <div class="w-6 high-m-button">
+              <div class="ml-auto sm:m-0 xl:w-6 high-m-button">
                 <p-button label="Auto-Fill" severity="secondary" />
               </div>
             </div>
 
-            <div class="flex flex-row column-gap-3 w-full align-items-end">
-              <div class="w-6">
-                <label for="given-name" class="font-light">Given Name</label>
+            <div
+              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3"
+            >
+              <div class="w-full xl:w-6">
+                <label for="given-name" class="font-normal xl:font-light"
+                  >Given Name</label
+                >
                 <input pInputText id="given-name" class="name-input" />
               </div>
-              <div class="w-6">
-                <label for="middle-name" class="font-light"
+              <div class="w-full xl:w-6">
+                <label for="middle-name" class="font-normal xl:font-light"
                   >Middle Name(S) (Optional)</label
                 >
                 <input pInputText id="middle-name" class="name-input" />
               </div>
             </div>
 
-            <div class="flex flex-row column-gap-3 w-full align-items-end">
-              <div class="w-6">
-                <label for="family-name" class="font-light">Family Name</label>
+            <div
+              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3"
+            >
+              <div class="w-full xl:w-6">
+                <label for="family-name" class="font-normal xl:font-light"
+                  >Family Name</label
+                >
                 <input pInputText id="family-name" class="name-input" />
               </div>
-              <div class="w-6">
-                <label for="suffix" class="font-light">Suffix (Optional)</label>
+              <div class="w-full xl:w-6">
+                <label for="suffix" class="font-normal xl:font-light"
+                  >Suffix (Optional)</label
+                >
                 <input pInputText id="suffix" class="name-input" />
               </div>
             </div>
           </div>
         </div>
-        <div class="border-1 border-round-lg p-4 name-container">
+        <div class="border-1 border-round-lg p-3 sm:p-5 name-container">
           <div class="flex flex-column row-gap-5">
             <h2>Citation Preview</h2>
-            <div class="flex flex-row styles-container">
+            <div
+              class="flex flex-column row-gap-4 sm:flex-row styles-container"
+            >
               <div class="flex flex-row column-gap-5">
                 <div class="flex flex-column style-wrapper">
                   <h3>Style:</h3>
@@ -109,7 +125,7 @@ <h3>Doe, John T.</h3>
             ) {
               <div
                 [formGroupName]="index"
-                class="flex flex-column border-1 border-round-lg p-4 name-container row-gap-4"
+                class="flex flex-column border-1 border-round-lg p-3 sm:p-5 name-container row-gap-4"
               >
                 <div class="flex flex-row">
                   <h2>Social Link {{ index + 1 }}</h2>
@@ -122,8 +138,10 @@ <h2>Social Link {{ index + 1 }}</h2>
                   }
                 </div>
 
-                <div class="flex flex-row column-gap-3 w-full align-items-end">
-                  <div class="w-4">
+                <div
+                  class="flex flex-column row-gap-4 w-full md:flex-row md:align-items-end md:column-gap-3"
+                >
+                  <div class="w-full md:w-4">
                     <p class="font-light mb-1">Social output</p>
                     <p-dropdown
                       formControlName="socialOutput"
@@ -133,7 +151,7 @@ <h2>Social Link {{ index + 1 }}</h2>
                     ></p-dropdown>
                   </div>
 
-                  <div class="w-8">
+                  <div class="w-full md:w-8">
                     <p class="font-light mb-1">Web Address</p>
                     <p-inputgroup class="addon-input">
                       <p-inputgroup-addon>{{
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.ts b/src/app/features/settings/profile-settings/profile-settings.component.ts
index 6a52effa7..917397434 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.ts
+++ b/src/app/features/settings/profile-settings/profile-settings.component.ts
@@ -51,7 +51,7 @@ export class ProfileSettingsComponent implements OnInit {
   });
 
   ngOnInit(): void {
-    if (this.userSocialLinks.length) {
+    if (!this.userSocialLinks.length) {
       this.addLink();
     }
   }
diff --git a/src/assets/styles/overrides/input-group-addon.scss b/src/assets/styles/overrides/input-group-addon.scss
index fce6d09ce..4c01a79ae 100644
--- a/src/assets/styles/overrides/input-group-addon.scss
+++ b/src/assets/styles/overrides/input-group-addon.scss
@@ -10,3 +10,9 @@
   font-size: 16px;
   min-width: auto;
 }
+
+@media (max-width: 300px) {
+  .p-inputgroupaddon {
+    display: none;
+  }
+}
diff --git a/src/assets/styles/overrides/input.scss b/src/assets/styles/overrides/input.scss
index e9f6e0cc1..8650e5e70 100644
--- a/src/assets/styles/overrides/input.scss
+++ b/src/assets/styles/overrides/input.scss
@@ -71,4 +71,12 @@ p-password.ng-touched.ng-invalid {
     border-top-left-radius: 0;
     border-left-style: none;
   }
+
+  @media (max-width: 300px) {
+    .p-inputtext {
+      border: 1px solid var.$grey-2;
+      border-bottom-left-radius: 8px;
+      border-top-left-radius: 8px;
+    }
+  }
 }