From 54115f3806cb55cbda914a7f3e8bf9e34ba6e06c Mon Sep 17 00:00:00 2001
From: emmanuel <ifeanyi@digdippa.com>
Date: Thu, 12 Oct 2023 10:53:51 +0000
Subject: [PATCH] CLASSROOMIO-T-215: Made the profile page in the LMS
 responsive

Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-98
Merged-by: Best Admin <best@digdippa.com>
---
 .../components/LMS/components/Profile.svelte  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/LMS/components/Profile.svelte b/src/lib/components/LMS/components/Profile.svelte
index 99c5c95a..b5f5237b 100644
--- a/src/lib/components/LMS/components/Profile.svelte
+++ b/src/lib/components/LMS/components/Profile.svelte
@@ -66,25 +66,25 @@
 </script>
 
 <Grid class="border-c rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}>
+  <Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
+    <Column sm={4} md={8} lg={4} class="mt-2 md:mt-0">
       <p class="dark:text-white font-bold">Profile Picture</p>
     </Column>
-    <Column sm={2} md={6} lg={8}>
-      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
+    <Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
+      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-16 h-16 lg:w-24 lg:h-24" />
     </Column>
   </Row>
-  <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}>
+  <Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}>
       <p class="dark:text-white font-bold">Personal Information</p>
     </Column>
-    <Column sm={2} md={6} lg={8}>
-      <TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
-      <TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
-      <TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
+    <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0">
+      <TextField label="Full Name" bind:value={$profile.fullname} className="w-full lg:w-60 mb-4" />
+      <TextField label="Username" bind:value={$profile.username} className="w-full lg:w-60 mb-4" />
+      <TextField label="Email" bind:value={$profile.email} className="w-full lg:w-60 mb-4" />
     </Column>
   </Row>
-  <Row class="m-5 w-full flex items-center justify-center">
+  <Row class="m-5 w-full flex items-center gap-2 lg:justify-center">
     <PrimaryButton
       label="Update Profile"
       className="mr-5"