Merge pull request #2991 from appwrite/fix/changelog-mobile-responsive

Fix/changelog mobile responsive

Author: HarshMN2345

src/lib/utils/code.ts

@@ -136,7 +136,7 @@ export const getCodeHtml = (args: Args) => {
         return carry;
     }, '');
 
-    return `<pre><code class="web-code language-${language} ${
+    return `<pre class="web-code-pre"><code class="web-code web-code-body language-${language} ${
         withLineNumbers ? 'line-numbers' : ''
     }">${final}</code></pre>`;
 };

src/markdoc/nodes/Fence.svelte

@@ -6,6 +6,7 @@
     import { platformMap, preferredPlatform } from '$lib/utils/references';
     import '$scss/hljs.css';
     import { melt } from '@melt-ui/svelte';
+    import { isInChangelog } from '../layouts/Changelog.svelte';
     import { getContext, hasContext } from 'svelte';
     import { get } from 'svelte/store';
     import type { CodeContext } from '../tags/MultiCode.svelte';
@@ -29,6 +30,7 @@
     }: FenceProps = $props();
 
     const inTutorialDocs = isInTutorialDocs();
+    const inChangelog = isInChangelog();
     const insideMultiCode = hasContext('multi-code');
     const selected = insideMultiCode ? getContext<CodeContext>('multi-code').selected : null;
 
@@ -93,6 +95,7 @@
 {:else}
     <section
         class="dark web-code-snippet not-prose my-8!"
+        class:in-changelog={inChangelog}
         class:no-top-margin={inTutorialDocs}
         aria-label="code-snippet panel"
     >
@@ -137,4 +140,24 @@
     .no-top-margin {
         margin-top: unset !important;
     }
+
+    .in-changelog {
+        max-width: 100%;
+    }
+
+    .in-changelog .web-code-snippet-content {
+        max-width: 100%;
+        overflow-x: auto;
+        overscroll-behavior-x: contain;
+    }
+
+    .in-changelog :global(.web-code-pre) {
+        max-width: 100%;
+        overflow-x: auto;
+    }
+
+    .in-changelog :global(.web-code-body.line-numbers) {
+        display: block;
+        min-width: max-content;
+    }
 </style>

src/routes/changelog/ChangelogEntry.svelte

@@ -6,7 +6,7 @@
     export let entry: PageData['entries'][0];
 </script>
 
-<div class="grid gap-5">
+<div class="changelog-entry grid min-w-0 gap-5">
     <time class="text-eyebrow px-4 uppercase sm:px-0" datetime={entry.date}
         >{formatDate(entry.date)}</time
     >
@@ -16,7 +16,7 @@
         </a>
     {/if}
 
-    <div class="prose prose-large px-4 sm:px-0">
+    <div class="entry-content prose prose-large min-w-0 px-4 sm:px-0">
         <h2 class="text-title not-prose font-aeonik-pro text-primary mb-8">
             <a href={entry.href} onclick={() => trackEvent(`changelog-entry-click`)}>
                 {entry.title}
@@ -25,3 +25,14 @@
         <slot />
     </div>
 </div>
+
+<style lang="scss">
+    .changelog-entry,
+    .entry-content {
+        min-width: 0;
+    }
+
+    .entry-content {
+        overflow-x: clip;
+    }
+</style>

src/routes/changelog/[[page]]/+page.svelte

@@ -51,8 +51,10 @@
         <div class="pt-10">
             <div class="web-big-padding-section-level-2">
                 <div class="wrapper container">
-                    <h1 class="text-display font-aeonik-pro text-primary">Changelog</h1>
-                    <ul>
+                    <h1 class="changelog-heading text-display font-aeonik-pro text-primary">
+                        Changelog
+                    </h1>
+                    <ul class="changelog-list">
                         {#each data.entries as entry}
                             <li>
                                 <div class="web-dot"></div>
@@ -88,15 +90,17 @@
         --padding-inline: 1rem;
         box-sizing: border-box;
         max-width: calc(49.375rem + var(--padding-inline) * 2);
+        min-width: 0;
         padding-inline: var(--padding-inline);
     }
 
-    ul {
+    .changelog-list {
         --padding-is: 2rem;
         --dot-offset: 0.25rem;
 
         display: grid;
         gap: 5rem;
+        min-width: 0;
 
         padding-inline-start: var(--padding-is);
         border-inline-start: 2px solid transparent;
@@ -120,6 +124,7 @@
         }
 
         li {
+            min-width: 0;
             position: relative;
 
             .web-dot {
@@ -131,7 +136,11 @@
     }
 
     @media screen and (max-width: 512px) {
-        ul {
+        .changelog-heading {
+            padding-inline: 1rem;
+        }
+
+        .changelog-list {
             padding-inline-start: 0;
             margin-block-start: 2.5rem;