From 172aca4ef9dd9fb8dc4a0e26fb66e0b37ac4bc24 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Tue, 11 Jul 2023 10:30:10 +0200
Subject: [PATCH 1/2] fix: group software metric values bottom right

---
 .../software/overview/cards/SoftwareMasonryCard.tsx  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
index d048e783c..d261ecbcf 100644
--- a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
+++ b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
@@ -63,11 +63,13 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){
               visibleNumberOfProgLang={visibleNumberOfProgLang}
             />
             {/* Metrics */}
-            <SoftwareMetrics
-              contributor_cnt={item.contributor_cnt}
-              mention_cnt={item.mention_cnt}
-              downloads={item.downloads}
-            />
+            <div className="flex gap-4">
+              <SoftwareMetrics
+                contributor_cnt={item.contributor_cnt}
+                mention_cnt={item.mention_cnt}
+                downloads={item.downloads}
+              />
+            </div>
           </div>
         </div>
       </div>

From e6d64b01e2eca24f3f85bcf0837917e6c238b14b Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Tue, 11 Jul 2023 11:03:41 +0200
Subject: [PATCH 2/2] ui: add Software Hightlights text

---
 .../components/layout/ContentContainer.tsx    | 42 +++++++++++++++++++
 .../software/overview/SoftwareHighlights.tsx  |  8 ++++
 2 files changed, 50 insertions(+)
 create mode 100644 frontend/components/layout/ContentContainer.tsx

diff --git a/frontend/components/layout/ContentContainer.tsx b/frontend/components/layout/ContentContainer.tsx
new file mode 100644
index 000000000..eed06bf44
--- /dev/null
+++ b/frontend/components/layout/ContentContainer.tsx
@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+type ContentContainerProps = {
+  element?: 'section' | 'article' | 'main' | 'div'
+  className?: string
+  children: JSX.Element | JSX.Element[]
+}
+
+export default function ContentContainer(props: ContentContainerProps) {
+  // basic container alignment - for lg + breakpoints
+  const classes = `px-4 lg:container lg:mx-auto ${props.className ?? ''}`
+
+  switch (props?.element) {
+    case 'section':
+      return (
+        <section className={classes}>
+          {props.children}
+        </section>
+      )
+    case 'article':
+      return (
+        <article className={classes}>
+          {props.children}
+        </article>
+      )
+    case 'main':
+      return (
+        <main className={classes}>
+          {props.children}
+        </main>
+      )
+    default:
+      return (
+        <div className={classes}>
+          {props.children}
+        </div>
+      )
+  }
+}
diff --git a/frontend/components/software/overview/SoftwareHighlights.tsx b/frontend/components/software/overview/SoftwareHighlights.tsx
index b6ae472db..6e03e3535 100644
--- a/frontend/components/software/overview/SoftwareHighlights.tsx
+++ b/frontend/components/software/overview/SoftwareHighlights.tsx
@@ -6,6 +6,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import ContentContainer from '~/components/layout/ContentContainer'
 import {HighlightsCarousel} from './highlights/HighlightsCarousel'
 import {SoftwareHighlight} from '~/components/admin/software-highlights/apiSoftwareHighlights'
 
@@ -20,6 +21,13 @@ export default function SoftwareHighlights({highlights}: { highlights: SoftwareH
 
   return (
     <div className="mt-8">
+      <ContentContainer>
+        <div
+          className="text-3xl"
+        >
+          Software Highlights
+        </div>
+      </ContentContainer>
       <HighlightsCarousel items={highlights} />
     </div>
   )