Fix clipping on loading spinner in narrative itineraries

opentripplanner · Nov 6, 2024 · 04d63c3 · 04d63c3
1 parent 0b2a585
commit 04d63c3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/lib/components/narrative/loading.tsx b/lib/components/narrative/loading.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const Loading = ({ extraSmall, small }: Props): JSX.Element => {
   return (
-    <div className="text-center percy-hide">
+    <div className="text-center percy-hide loading-container">
       <StyledIconWrapper size={small ? '3x' : extraSmall ? '1x' : '5x'} spin>
         <Redo />
       </StyledIconWrapper>

diff --git a/lib/components/narrative/styled.js b/lib/components/narrative/styled.js
@@ -14,6 +14,11 @@ export const NarrativeItinerariesContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+
+  // Prevent the loading spinner from clipping the top of the container
+  .loading-container {
+    margin-top: 25px;
+  }
 `
 
 export const ULContainer = styled.ul`