edits for #116

src/components/BodyText/BodyText.svelte

@@ -11,11 +11,14 @@
   let cls: string = '';
   export { cls as class };
 
+  /** Add an id to the block tag to target it with custom CSS. */
+  export let id: string = '';
+
   import { marked } from 'marked';
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="body-text fmy-5 {cls}">
+<Block id="{id}" class="fmy-5 {cls}">
   {#if text}
     {@html marked.parse(text)}
   {/if}

src/components/FeaturePhoto/FeaturePhoto.stories.svelte

@@ -25,6 +25,10 @@
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
     },
   };
 </script>

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -41,6 +41,15 @@
    * Width of the container, one of: normal, wide, wider, widest or fluid
    */
   export let width: ContainerWidth = 'normal';
+
+  /**
+   * Set a different width for the text within the text well, for example,
+   * "normal" to keep the title, description and notes inline with the rest
+   * of the text well. Can't ever be wider than `width`.
+   * @type {string}
+   */
+  export let textWidth: ContainerWidth | null = 'normal';
+
   /**
    * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
    */
@@ -94,9 +103,11 @@
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
+        <Block width="{textWidth}" class="fmx-auto fmy-0">
           <figcaption>
             {caption}
           </figcaption>
+        </Block>
       </PaddingReset>
     {/if}
     {#if !altText}

src/components/GraphicBlock/TextBlock.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if width}
-  <Block width="{width}" class="mx-auto my-0">
+  <Block width="{width}" class="fmx-auto fmy-0">
     <slot />
   </Block>
 {:else}

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -205,6 +205,10 @@
         max-height: 100%;
       }
 
+      li {
+        padding: 0;
+      }
+
       .splide__arrows {
         width: 275px;
         margin: 0 auto;

src/components/SearchInput/SearchInput.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <div class="search relative inline-flex items-center" class:active="{active}">
-  <div class="search--icon absolute ml-2 mt-1.5">
+  <div class="search--icon absolute ml-2 mt-1">
     <MagnifyingGlass />
   </div>
   <input

src/components/SimpleTimeline/SimpleTimeline.svelte

@@ -95,6 +95,7 @@
       border-left: 1px solid var(--symbol-colour);
       &:last-child {
         border-left: 1px solid $theme-colour-background;
+        @include fpb-0;
       }
     }
     svg {
@@ -124,12 +125,6 @@
       }
       :global(p) {
         @include body-note;
-        // @include fmb-2;
-        // @include leading-normal;
-        // @include font-light;
-        // @include text-sm;
-        // @include font-note;
-        // @include text-primary;
       }
     }
   }

src/components/Table/Table.svelte

@@ -225,7 +225,7 @@
           <p class="table--header--dek body-note">{@html dek}</p>
         {/if}
         {#if searchable || filterList}
-          <nav class="input">
+          <nav class="input fmx-0 fmy-2">
             {#if filterList}
               <div class="table--header--filter">
                 <Select
@@ -418,7 +418,6 @@
   }
 
   nav.input {
-    margin: 0.5rem 0;
     padding: 0;
     width: 100%;
     display: flex;
@@ -426,7 +425,7 @@
     align-items: flex-end;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
   }
 
   nav.show-all {