responsivity related corections

terpimost · Jan 28, 2024 · 03e6818 · 03e6818
1 parent f3d1ad2
commit 03e6818
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/comparison.css b/comparison.css
@@ -189,6 +189,16 @@ h2 {
     top: 60px;
     z-index: 1;
 }
+#cloud-comparison.comparison-table th:not(.sticky) {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+#all-pans-comparison.comparison-table th:not(.sticky) {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 8px;
+}
+
 
 .comparison-table td.subheader.comparison-table-feature {
     font-weight: 600;
@@ -211,6 +221,10 @@ h2 {
     padding-bottom: 8px;
     border-radius: 0;
 }
+#cloud-comparison.comparison-table th.sticky  {
+    padding-left: 16px;
+    padding-right: 16px;
+}
 .comparison-table.comparison-all th.sticky {
     padding-top: 4px;
     padding-bottom: 4px;
@@ -364,7 +378,7 @@ table#all-pans-comparison._hidden {
     }
 }
 
-@media (max-width: 840px) {
+@media (max-width: 860px) {
 
     .comparison-table th,
     .comparison-table th.sticky {
@@ -374,7 +388,7 @@ table#all-pans-comparison._hidden {
         height: 44px;
         padding: 4px 8px 4px;
     }
-    #all-pans-comparison.comparison-table th,
+    #all-pans-comparison.comparison-table th:not(.sticky),
     #all-pans-comparison.comparison-table th.sticky {
         padding: 4px 2px 4px;
     }
@@ -402,6 +416,7 @@ table#all-pans-comparison._hidden {
 
     .comparison-table th.comparison-table-feature,
     #all-pans-comparison.comparison-table th.comparison-table-feature,
+    #cloud-comparison.comparison-table th.comparison-table-feature,
     .comparison-table td.comparison-table-feature {
         padding-left: 8px;
     }
@@ -419,6 +434,7 @@ table#all-pans-comparison._hidden {
     .comparison-table td.comparison-value-negative {
         font-size: 13px;
         line-height: 14px;
+        word-break: break-word;
     }
 
     .comparison-value-positive::after,
@@ -438,9 +454,6 @@ table#all-pans-comparison._hidden {
 }
 
 @media (max-width: 420px) {
-    #all-pans-comparison.comparison-table colgroup col:first-child {
-        width: 120px;
-    }
     .comparison-table .icon{
         transform: scale(0.75);
     }

diff --git a/index.html b/index.html
@@ -344,7 +344,7 @@ <h2>Self-hosted plans comparison</h2>
           </tr>
           <tr>
             <td class="comparison-table-feature"><a href="https://zulip.com/help/search-for-messages">Message history search</a></td>
-            <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
+            <td class="comparison-value-warning" aria-label="Unlimited">Limited</td>
             <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
             <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
           </tr>
@@ -1195,7 +1195,7 @@ <h2>Self-hosted plans comparison</h2>
           <tr>
             <td class="comparison-table-feature"><a href="https://zulip.com/help/search-for-messages">Message history search</a></td>
 
-            <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
+            <td class="comparison-value-warning" aria-label="Unlimited">Limited</td>
             <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
             <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
 
@@ -1243,7 +1243,7 @@ <h2>Self-hosted plans comparison</h2>
           <tr>
             <td class="comparison-table-feature"><a href="https://zulip.com/help/share-and-upload-files">File sharing and storage</a></td>
 
-            <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
+            <td class="comparison-value-warning" aria-label="Unlimited">50 GB total</td>
             <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
             <td class="comparison-value-positive" aria-label="Unlimited"><i class="icon icon-infinity"></i></td>
 
@@ -1333,9 +1333,9 @@ <h2>Self-hosted plans comparison</h2>
             <td class="comparison-value-positive" aria-label="Supported"><i class="icon icon-check"></i></td>
 
             <td class="comparison-value-warning" aria-label="Self-managed"><i class="icon icon-wrench"></i></td>
-            <td class="comparison-value-positive" aria-label="Supported"><i class="icon icon-check"></i></td>
-            <td class="comparison-value-positive" aria-label="Supported"><i class="icon icon-check"></i></td>
-            <td class="comparison-value-positive" aria-label="Supported"><i class="icon icon-check"></i></td>
+            <td class="comparison-value-positive" aria-label="Contact us please">Billed hourly</td>
+            <td class="comparison-value-warning" aria-label="Contact us please">Inquire</td>
+            <td class="comparison-value-warning" aria-label="Contact us please">Inquire</td>
           </tr>
         </tbody>
       </table>