From 4b84a12320ac2a998691bfdb374ce88f42b326b5 Mon Sep 17 00:00:00 2001
From: kapobajza <33549969+kapobajza@users.noreply.github.com>
Date: Tue, 15 Jul 2025 18:37:41 +0200
Subject: [PATCH] fix(website): Added gap between home page features on smaller
 screens (#645)

---
 .../src/components/HomepageFeatures/index.tsx | 20 ++++++++++---------
 .../HomepageFeatures/styles.module.css        |  6 ++++++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
index ae3b4a4..137f468 100644
--- a/website/src/components/HomepageFeatures/index.tsx
+++ b/website/src/components/HomepageFeatures/index.tsx
@@ -15,8 +15,10 @@ const FeatureList: FeatureItem[] = [
     imgSrc: require("@site/static/img/files-toml.png").default,
     description: (
       <>
-        <a href="/docs/Users/channels">Create your own channels in a simple TOML file and search through
-        files, git repositories, environment variables, docker images, and more.
+        <a href="/docs/Users/channels">
+          Create your own channels in a simple TOML file and search through
+          files, git repositories, environment variables, docker images, and
+          more.
         </a>
       </>
     ),
@@ -27,8 +29,8 @@ const FeatureList: FeatureItem[] = [
     description: (
       <>
         <a href="/docs/Users/shell-integration">
-        Television integrates with your shell and provides autocompletion that is both
-          extensible and configurable to use your own channels.
+          Television integrates with your shell and provides autocompletion that
+          is both extensible and configurable to use your own channels.
         </a>
       </>
     ),
@@ -48,11 +50,11 @@ function Feature({ title, imgSrc, description }: FeatureItem) {
         <p>{description}</p>
       </div>
       <div className="featureImageContainer">
-        <img 
-          src={imgSrc} 
+        <img
+          src={imgSrc}
           alt={title}
-          className={styles.featureImage} 
-          role="img" 
+          className={styles.featureImage}
+          role="img"
         />
       </div>
     </div>
@@ -63,7 +65,7 @@ export default function HomepageFeatures(): ReactNode {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row">
+        <div className={clsx("row", styles.featuresRow)}>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index 92b05d0..10fe376 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -40,3 +40,9 @@ html[data-theme='dark'] .featureSvg {
   flex-direction: column;
   align-items: center;
 }
+
+@media screen and (max-width: 996px) {
+  .featuresRow {
+    gap: 2rem;
+  }
+}
\ No newline at end of file