add responsivity-related fixes

adamstrojil · Sep 9, 2024 · 0629072 · 0629072
1 parent c13ee7b
commit 0629072
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/app/components/DateRange/DateRange.tsx b/src/app/components/DateRange/DateRange.tsx
@@ -18,11 +18,11 @@ export const DateRange = ({
     const duration = calculateMonthDifference(sinceRawValue, untilRawValue);
 
     return (
-        <div className="text-neutral-400 uppercase font-mono flex gap-2">
+        <div className="text-neutral-400 uppercase font-mono flex flex-wrap gap-2">
             {since}
             {until && '-'}
             {until}
-            {isDurationVisible && `(${duration})`}
+            {isDurationVisible && <span className='text-nowrap'>({duration})</span>}
         </div>
     );
 };
diff --git a/src/app/components/DateRange/utils.tsx b/src/app/components/DateRange/utils.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 const YEAR_AND_MONTH_REGEX = /^\d{4}-\d{2}$/; //e.g. "2023-12"
+const NON_BREAKING_SPACE = '\xa0';
 
 const parseDate = (dateString: string) => {
     const [year, month] = dateString.split('-').map(Number);
@@ -21,7 +22,7 @@ const formatMonthYear = (dateString: string) => {
     const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
     const monthName = months[parseInt(month, 10) - 1];
-    const formattedDate = `${monthName} ${year}`;
+    const formattedDate = `${monthName}${NON_BREAKING_SPACE}${year}`;
 
     return formattedDate;
 };

diff --git a/src/app/data/AdamStrojilEnglish.ts b/src/app/data/AdamStrojilEnglish.ts
@@ -241,13 +241,13 @@ export const DATA: PersonData = {
             skills: [
                 'flexibility',
                 'responsibility',
-                'dedication',
-                'open-minded',
+                'independence',
                 'fairplay',
                 'teamwork',
-                'independence',
                 'humour',
-                'curiousity',
+                'dedication',
+                'curiosity',
+                'open-mindedness',
             ],
         },
         {