Fix mobile view for vision content

src/css/tailwind.css

@@ -1678,6 +1678,29 @@ pre code {
   }
 }
 
+/* Mobile improvements for vision pages */
+@media (max-width: 768px) {
+  /* Fix small margins on mobile for docs content */
+  [class*="docPage"] .container,
+  [class*="docItemContainer"],
+  .markdown {
+    padding-left: .75rem !important;
+    padding-right: .75rem !important;
+  }
+
+  /* Ensure proper spacing for article content */
+  [class*="docItemContainer"] article {
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
+  }
+
+  /* Add left padding to "Edit this page" link */
+  .theme-edit-this-page {
+    padding-left: 0.75rem !important;
+  }
+
+}
+
 /*ask ai*/
 .DocSearch {
   /*display: none;*/

vision/concepts/consent.mdx

@@ -25,31 +25,31 @@ XMTP's consent system gives your users complete inbox control with encrypted pre
 Users decide who can reach them with private accept/block lists. When a user accepts/blocks a request, it is added to a private, encrypted list of their contacts, keeping their inbox spam-free. Only the user can see this list, and blocked users are never notified.
 
 <div className="text-center">
-  <img src="/img/spam-free-inbox.png" alt="Spam-free inbox" />
+  <img src="/img/spam-free-inbox.png" alt="Spam-free inbox" width="400" />
 </div>
 
 <br/>
 
 When a new contact tries to message your user, you can provide UIs for unconsented message requests—outside of their inbox.
 
 <div className="text-center">
-  <img src="/img/without-consent.png" alt="Without consent" />
+  <img src="/img/without-consent.png" alt="Without consent" width="800" />
 </div>
 
 <br/>
 
 Your user can then decide to accept or block the contact.
 
 <div className="text-center">
-  <img src="/img/consent-statuses.png" alt="Consent statuses" />
+  <img src="/img/consent-statuses.png" alt="Consent statuses" width="800" />
 </div>
 
 <br/>
 
  You can then display conversations with accepted contacts in their inbox.
 
 <div className="text-center">
-  <img src="/img/accepted-contact.png" alt="Accepted contact" />
+  <img src="/img/accepted-contact.png" alt="Accepted contact" width="400" />
 </div>
 
 <br/>
@@ -59,7 +59,7 @@ Your user can then decide to accept or block the contact.
 Consent preferences are stored on the XMTP network, not in individual apps. When your user accepts or blocks a contact, their consent preferences can be synced across all apps built with XMTP. This eliminates the user frustration of managing the same contacts across multiple messaging platforms. No need to accept or block the same contact in every app.
 
 <div className="text-center">
-  <img src="/img/network-level-consent.png" alt="Network-level consent" />
+  <img src="/img/network-level-consent.png" alt="Network-level consent" width="800" />
 </div>
 
 <br/>