Fix overflow issues

discordplace · Apr 10, 2024 · 12e8009 · 12e8009
1 parent d945752
commit 12e8009
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/client/app/(profiles)/profile/[slug]/components/sections/About.jsx b/client/app/(profiles)/profile/[slug]/components/sections/About.jsx
@@ -55,7 +55,7 @@ export default function About({ profile }) {
         About
       </motion.h2>
 
-      <motion.p className='mt-2 whitespace-pre-wrap text-tertiary' 
+      <motion.p className='mt-2 break-words whitespace-pre-wrap text-tertiary' 
         initial={{ opacity: 0, y: -10 }} 
         animate={{ opacity: 1, y: 0 }} 
         transition={{ duration: 0.3, type: 'spring', stiffness: 100, damping: 10, delay: 0.15 }}
@@ -81,14 +81,14 @@ export default function About({ profile }) {
               {icon}
             </div>
 
-            <div className='flex flex-col'>
+            <div className='flex flex-col w-full'>
               <h3 className='font-semibold'>
                 {label}
               </h3>
 
-              <p className='text-sm text-tertiary'>
+              <span className='text-sm truncate text-tertiary max-w-[80%]'>
                 {value}
-              </p>
+              </span>
             </div>
           </motion.div>
         ))}

diff --git a/client/app/(profiles)/profile/[slug]/edit/components/Edit.jsx b/client/app/(profiles)/profile/[slug]/edit/components/Edit.jsx
@@ -120,7 +120,7 @@ export default function Edit({ profileData }) {
       <div className='flex flex-col w-full h-full p-6 rounded-2xl bg-secondary gap-y-8'>
         {canBeEditedKeys.map((key, index) => (
           <div className='flex flex-col justify-between gap-4 sm:flex-row' key={key}>
-            <div className='flex flex-col flex-1 gap-y-1'>
+            <div className='flex flex-col flex-1 w-full gap-y-1 max-w-[80%]'>
               <h2 className='font-medium text-tertiary'>{key === 'preferredHost' ? 'Preferred Host' : fuc(key)}</h2>
               {currentlyEditingIndex === index ? (
                 key === 'bio' ? (
@@ -168,7 +168,7 @@ export default function Edit({ profileData }) {
                   />
                 )
               ) : (
-                <p className='font-medium whitespace-pre-wrap text-primary max-h-[300px] overflow-y-auto'>{profile[key] || 'Unknown'}</p>
+                <p className='font-medium whitespace-pre-wrap text-primary max-h-[300px] overflow-y-auto truncate'>{profile[key] || 'Unknown'}</p>
               )}
             </div>
 

diff --git a/client/app/(profiles)/profiles/components/Hero/Profiles/Card.jsx b/client/app/(profiles)/profiles/components/Hero/Profiles/Card.jsx
@@ -34,7 +34,7 @@ export default function Card({ avatar_url, username, occupation, gender, locatio
               </Tooltip>
             )}
           </div>
-          <p className='text-sm text-secondary/60'>{occupation || 'Unknown'}</p>
+          <p className='max-w-[190px] text-sm truncate text-secondary/60'>{occupation || 'Unknown'}</p>
         </div>
       </div>
 
@@ -65,8 +65,11 @@ export default function Card({ avatar_url, username, occupation, gender, locatio
           )}  
         </span>
 
-        <span className='flex items-center px-2 py-2 text-sm font-medium rounded bg-tertiary gap-x-1 text-secondary'>
-          <MdLocationPin color='#ff4343' /> {location || 'Unknown'}
+        <span className='flex items-center max-w-full px-2 py-2 text-sm font-medium rounded bg-tertiary gap-x-1 text-secondary'>
+          <MdLocationPin color='#ff4343' />
+          <span className='truncate max-w-[90%]'>
+            {location || 'Unknown'}
+          </span>
         </span>
 
         <span className='flex items-center px-2 py-2 text-sm font-medium rounded bg-tertiary gap-x-1 text-secondary'>

diff --git a/server/src/schemas/Profile/index.js b/server/src/schemas/Profile/index.js
@@ -14,7 +14,8 @@ const ProfileSchema = new Schema({
     }
   },
   occupation: {
-    type: String
+    type: String,
+    max: 64
   },
   gender: {
     type: String,