Fix styling

Author: “yndira-flowforge”

src/_includes/feature_lists/features-table-base.njk

@@ -1,7 +1,7 @@
 <div class="ff-feature-table m-auto">
     <ul class="{{ hosting }} ff-feature-table-section sticky top-0 md:top-14 z-10">
         <li class="ff-feature--column-header">
-            <span class="sticky left-0 h-full"></span>
+            <span class="sticky left-0 h-full bg-white"></span>
             {% if hosting == "cloud" %}
             <label class="mr-2">
                 <div>Starter</div>
@@ -16,14 +16,9 @@
     <ul class="{{ hosting }} ff-feature-table-section">
         <li class="ff-feature--header sticky top-[44px]">
             <span style="padding-top: 12px; padding-bottom: 12px;" class="sticky left-0 h-full">{{ section.label }}</span>
-            {% if hosting == "cloud" %}
-            <span></span>
             <span></span>
             <span></span>
-            {% elif hosting == "self-hosted" %}
             <span></span>
-            <span></span>
-            {% endif %}
         </li>
         {% for row in section.rows %}
         {% if hosting in row.tags %}

src/css/style.css

@@ -1226,7 +1226,7 @@ h4:hover .header-anchor {
 
     .ff-feature-table-section li {
         display: grid;
-        grid-template-columns: 270px 1fr 1fr 1fr 1fr;
+        grid-template-columns: 270px 1fr 1fr 1fr;
         align-items: center;
         @apply bg-indigo-50/30;
     }
@@ -1241,7 +1241,7 @@ h4:hover .header-anchor {
 
     @media (max-width: 720px) {
         .ff-feature-table-section li {
-            grid-template-columns: 220px 1fr 1fr 1fr 1fr;
+            grid-template-columns: 220px 1fr 1fr 1fr;
         }
         .self-hosted.ff-feature-table-section li {
             grid-template-columns: 220px 1fr 1fr;
@@ -1250,7 +1250,7 @@ h4:hover .header-anchor {
 
     @media (max-width: 680px) {
         .ff-feature-table-section li {
-            grid-template-columns: 170px 1fr 1fr 1fr 1fr;
+            grid-template-columns: 170px 1fr 1fr 1fr;
         }
         .self-hosted.ff-feature-table-section li {
             grid-template-columns: 170px 1fr 1fr;

src/css/style.page.css

@@ -145,7 +145,7 @@
 @layer components {
     .pricing-tiles {
         position: relative;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
         gap: 20px;
         z-index: 2;
         margin-left: auto;