fix(ItinerarySegmentDetail): fix overflowing content issue

kiwicom · Oct 9, 2023 · bac87db · bac87db
1 parent 6599337
commit bac87db
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
@@ -182,7 +182,7 @@ const content = [
 
 export const Segment = () => {
   return (
-    <Stack spacing="large">
+    <div className="space-y-xl">
       <Itinerary>
         <ItinerarySegment>
           <ItinerarySegmentStop
@@ -240,7 +240,7 @@ export const Segment = () => {
           />
         </ItinerarySegment>
       </Itinerary>
-    </Stack>
+    </div>
   );
 };
 

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx
@@ -21,7 +21,9 @@ import { usePart } from "../context";
 import { useWidth } from "../../context";
 import AirplaneDown from "../../../icons/AirplaneDown";
 import type { Props } from "./types";
+import type { SpaceAfterSizes } from "../../../common/types";
 import ItineraryIcon from "../ItineraryIcon";
+import getSpacingToken from "../../../common/getSpacingToken";
 
 const StyledWrapper = styled.div`
   width: 100%;
@@ -79,7 +81,7 @@ const StyledExpandableContent = styled.div<{ $offset: number }>`
     padding: 0 ${theme.orbit.spaceSmall};
     position: relative;
     z-index: 1;
-    margin-${left}: ${parseInt(theme.orbit.spaceXSmall, 10) + $offset}px;
+    ${left}: ${parseInt(theme.orbit.spaceXSmall, 10) + $offset}px;
   `}
 `;
 
@@ -128,6 +130,20 @@ const StyledIcon = styled.div<{ isFirst?: boolean; isLast?: boolean }>`
   `}
 `;
 
+const StyledItemWrapper = styled.div<{ $offset: number; spaceAfter: SpaceAfterSizes }>`
+  ${({ theme, $offset }) => css`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: calc(100% - ${parseInt(theme.orbit.spaceXSmall, 10) + $offset}px);
+    margin-bottom: ${getSpacingToken};
+  `};
+`;
+
+StyledItemWrapper.defaultProps = {
+  theme: themeDefault,
+};
+
 StyledIcon.defaultProps = {
   theme: themeDefault,
 };
@@ -199,9 +215,8 @@ const ItinerarySegmentDetail = ({
                         {title}
                       </TemporaryText>
                     </StyledHeadingOffset>
-                    <Stack
-                      direction="column"
-                      spacing="none"
+                    <StyledItemWrapper
+                      $offset={calculatedWidth}
                       spaceAfter={idx === content.length - 1 ? "none" : "medium"}
                     >
                       {items.map(({ icon: itemIcon, name, value }, id) => {
@@ -222,7 +237,7 @@ const ItinerarySegmentDetail = ({
                           </Stack>
                         );
                       })}
-                    </Stack>
+                    </StyledItemWrapper>
                   </React.Fragment>
                 );
               })}