Fit physics footer links on single row

Author: bmagyarkuti

src/app/components/elements/list-groups/SocialLinks.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {Col, Row} from "reactstrap";
 import {SITE_TITLE, siteSpecific, SOCIAL_LINKS} from "../../../services";
 import {ExternalLink} from "../ExternalLink";
-import chunk from 'lodash/chunk';
 
 const getSocialIcon = (name: string) => {
     if (name === "x (twitter)") {
@@ -12,7 +11,7 @@ const getSocialIcon = (name: string) => {
 };
 
 export const SocialLinksRow = () => {
-    const linksByColumn = chunk(Object.entries(SOCIAL_LINKS), 2);
+    const links = Object.entries(SOCIAL_LINKS);
     return (
         <div className='footer-links footer-links-social'>
             {
@@ -21,14 +20,12 @@ export const SocialLinksRow = () => {
                     <>
                         <h5>Get social</h5>
                         <Row>
-                            {linksByColumn.map((column, index) => (
-                                <Col key={index}>
-                                    {column.map(([_, {name, href}]) =>
-                                        <ExternalLink href={href}  key={name}>
-                                            <img src={getSocialIcon(name.toLowerCase())} alt={`${SITE_TITLE} on ${name}`}
-                                                className='social-logo'/>
-                                        </ExternalLink>
-                                    )}
+                            {links.map(([_, {name, href}], index) => (
+                                <Col key={index} className="col-4">
+                                    <ExternalLink href={href}  key={name}>
+                                        <img src={getSocialIcon(name.toLowerCase())} alt={`${SITE_TITLE} on ${name}`}
+                                            className='social-logo'/>
+                                    </ExternalLink>
                                 </Col>
                             ))}
                         </Row>
@@ -37,7 +34,7 @@ export const SocialLinksRow = () => {
                     <>
                         <h2>Get social</h2>
                         <div className='mt-1 text-nowrap'>
-                            {Object.entries(SOCIAL_LINKS).map(([_, {name, href}]) =>
+                            {links.map(([_, {name, href}]) =>
                                 <div className={"me-3 d-inline-block"} key={name}>
                                     <ExternalLink href={href}>
                                         <img src={getSocialIcon(name.toLowerCase())} alt={`${SITE_TITLE} on ${name}`}