Add a wrapper div

MuckRock · Apr 30, 2024 · ba89e3f · ba89e3f
1 parent d450e6a
commit ba89e3f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/lib/components/documents/TextPage.svelte b/src/lib/components/documents/TextPage.svelte
@@ -23,7 +23,7 @@
     align-self: stretch;
     gap: var(--font-m, 1rem);
     padding: 0 1rem;
-    margin: 0.75rem 0;
+    margin: 0.75rem 0 0;
     max-width: 100%;
   }
 
@@ -32,6 +32,7 @@
     margin: 0;
     padding: 1.5rem;
     text-wrap: pretty;
+    word-break: break-word;
 
     color: var(--gray-5, #233944);
     font-family: "Source Code Pro", monospace;

diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -106,9 +106,11 @@
 
   {#if mode === "text"}
     {#await text then { pages }}
-      {#each pages as { page, contents }}
-        <TextPage {page} {contents} --zoom={zoom} />
-      {/each}
+      <div class="textPages">
+        {#each pages as { page, contents }}
+          <TextPage {page} {contents} --zoom={zoom} />
+        {/each}
+      </div>
     {/await}
   {/if}
 
@@ -147,6 +149,13 @@
 </ContentLayout>
 
 <style>
+  .textPages {
+    max-width: 48rem;
+    padding: 0 1rem;
+    margin: 0 auto;
+    width: 100%;
+  }
+
   label.mode,
   label.zoom {
     display: flex;