fix: responsive on blog post with code blocks and katex

components/Header/index.tsx

@@ -21,6 +21,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
             height={60}
             src='/images/divlo_icon_small.png'
             alt='Divlo'
+            priority
           />
           <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
             Divlo
@@ -37,7 +38,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
             Blog
           </Link>
         </div>
-        {showLanguage && <Language />}
+        {showLanguage ? <Language /> : null}
         <SwitchTheme />
       </div>
     </header>

components/Profile/ProfileDescriptionBottom.tsx

@@ -6,7 +6,7 @@ export const ProfileDescriptionBottom: React.FC = () => {
   return (
     <p className='mb-8 mt-8 text-base font-normal text-gray dark:text-gray-dark'>
       {t('home:about.description-bottom')}
-      {lang === 'fr' && (
+      {lang === 'fr' ? (
         <>
           <br />
           <br />
@@ -17,7 +17,7 @@ export const ProfileDescriptionBottom: React.FC = () => {
             Curriculum vitæ
           </a>
         </>
-      )}
+      ) : null}
     </p>
   )
 }

components/design/Section/index.tsx

@@ -23,7 +23,9 @@ export const Section: React.FC<SectionProps> = (props) => {
       <div className='w-full px-3'>
         <ShadowContainer style={{ marginTop: 50 }}>
           <section {...rest}>
-            {heading != null && <SectionHeading>{heading}</SectionHeading>}
+            {heading != null ? (
+              <SectionHeading>{heading}</SectionHeading>
+            ) : null}
             <div className='w-full px-3'>{children}</div>
           </section>
         </ShadowContainer>
@@ -34,7 +36,7 @@ export const Section: React.FC<SectionProps> = (props) => {
   if (withoutShadowContainer) {
     return (
       <section {...rest}>
-        {heading != null && <SectionHeading>{heading}</SectionHeading>}
+        {heading != null ? <SectionHeading>{heading}</SectionHeading> : null}
         <div className='w-full px-3'>{children}</div>
       </section>
     )
@@ -42,16 +44,18 @@ export const Section: React.FC<SectionProps> = (props) => {
 
   return (
     <section {...rest}>
-      {heading != null && (
-        <SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
+      {heading != null ? (
+        <SectionHeading
+          style={{ ...(description != null ? { margin: 0 } : {}) }}
+        >
           {heading}
         </SectionHeading>
-      )}
-      {description != null && (
+      ) : null}
+      {description != null ? (
         <p style={{ marginTop: 7 }} className='text-center'>
           {description}
         </p>
-      )}
+      ) : null}
       <div className='w-full px-3'>
         <ShadowContainer>
           <div className='w-full px-16 py-4 leading-8'>{children}</div>