Fix story item text overflow

- adjust story panel width
TerriaJS · Feb 13, 2025 · e23109e · e23109e
1 parent 04a75fd
commit e23109e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/lib/ReactViews/Story/Story.tsx b/lib/ReactViews/Story/Story.tsx
@@ -278,7 +278,13 @@ const Story = (props: Props) => {
             border-bottom: 1px solid rgba(255, 255, 255, 0.15);
           `}
         >
-          <div>
+          <div
+            css={`
+              width: 100%;
+              overflow-x: hidden;
+              display: flex;
+            `}
+          >
             <TextSpan
               css={`
                 color: #baebf8;
@@ -289,7 +295,14 @@ const Story = (props: Props) => {
             >
               {props.index + 1}
             </TextSpan>
-            <TextSpan textLight medium>
+            <TextSpan
+              overflowEllipsis
+              textLight
+              medium
+              css={`
+                overflow-x: hidden;
+              `}
+            >
               {story.title && story.title.length > 0
                 ? story.title
                 : t("story.untitledScene")}
@@ -320,7 +333,14 @@ const Story = (props: Props) => {
         </Box>
         {bodyText.length > 0 && (
           <Box paddedRatio={2} paddedHorizontally={3}>
-            <Text textLight medium>
+            <Text
+              overflowEllipsis
+              textLight
+              medium
+              css={`
+                overflow-x: hidden;
+              `}
+            >
               {bodyText}
             </Text>
           </Box>

diff --git a/lib/ReactViews/Story/StoryPanel/StoryPanel.tsx b/lib/ReactViews/Story/StoryPanel/StoryPanel.tsx
@@ -254,7 +254,7 @@ class StoryPanel extends React.Component<Props, State> {
             ref={this.slideRef as React.RefObject<HTMLDivElement>}
             css={`
               @media (min-width: 992px) {
-                max-width: 60vw;
+                max-width: 36vw;
               }
               border-radius: 6px;
               overflow: hidden;