Updated the consent banner

company_site/public/static/public/css/style.css

@@ -667,6 +667,10 @@ input:focus, select:focus, textarea:focus {
     margin: 0;
 }
 
+.cookie-consent-text-short {
+    display: none;
+}
+
 .cookie-consent-actions {
     display: flex;
     gap: 0.75rem;
@@ -685,16 +689,41 @@ input:focus, select:focus, textarea:focus {
 }
 
 @media (max-width: 640px) {
+    .cookie-consent-banner {
+        padding: 0.625rem 0.75rem;
+        padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
+    }
+
     .cookie-consent-content {
         flex-direction: column;
         align-items: stretch;
+        gap: 0.625rem;
+    }
+
+    .cookie-consent-text-short {
+        display: inline;
+    }
+
+    .cookie-consent-text-full {
+        display: none;
+    }
+
+    .cookie-consent-text {
+        flex: none;
+        font-size: 0.8125rem;
+        line-height: 1.35;
     }
 
     .cookie-consent-actions {
         width: 100%;
+        gap: 0.5rem;
     }
 
     .cookie-consent-actions .btn {
         flex: 1;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.75rem;
+        border-radius: 6px;
+        text-transform: none;
     }
 }

company_site/public/templates/base.html

@@ -137,8 +137,9 @@
     aria-label="Cookie consent">
     <div class="cookie-consent-content">
       <p class="cookie-consent-text">
-        We use Tianji analytics to understand how visitors use our site. Tracking runs only if you accept.
+        <span class="cookie-consent-text-full">We use analytics tracking to understand how visitors use our site. Tracking runs only if you accept.
-        See our <a href="{% url 'terms_of_service' %}">Terms of Service &amp; Privacy Policy</a> for details.
+        See our <a href="{% url 'terms_of_service' %}">Terms of Service &amp; Privacy Policy</a> for details.</span>
+        <span class="cookie-consent-text-short">We use analytics if you accept. <a href="{% url 'terms_of_service' %}">Privacy Policy</a></span>
       </p>
       <div class="cookie-consent-actions">
         <button type="button" id="cookie-consent-decline" class="btn btn-outline">Decline</button>