Fix story item text overflow

- adjust story panel width - reduce max height on story body -> 200px, remove padding when collapsed
TerriaJS · Feb 13, 2025 · c39d684 · c39d684
1 parent 04a75fd
commit c39d684
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 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,15 @@ const Story = (props: Props) => {
             >
               {props.index + 1}
             </TextSpan>
-            <TextSpan textLight medium>
+            <TextSpan
+              overflowEllipsis
+              textLight
+              medium
+              css={`
+                overflow-x: hidden;
+                white-space: nowrap;
+              `}
+            >
               {story.title && story.title.length > 0
                 ? story.title
                 : t("story.untitledScene")}
@@ -320,7 +334,15 @@ const Story = (props: Props) => {
         </Box>
         {bodyText.length > 0 && (
           <Box paddedRatio={2} paddedHorizontally={3}>
-            <Text textLight medium>
+            <Text
+              overflowEllipsis
+              textLight
+              medium
+              css={`
+                overflow-x: hidden;
+                white-space: nowrap;
+              `}
+            >
               {bodyText}
             </Text>
           </Box>

diff --git a/lib/ReactViews/Story/StoryPanel/StoryBody.tsx b/lib/ReactViews/Story/StoryPanel/StoryBody.tsx
@@ -12,13 +12,11 @@ const StoryContainer = styled(Box).attrs((props: { isCollapsed: boolean }) => ({
   background-color: ${(props) => props.theme.transparentDark}
   backdrop-filter: ${(props) => props.theme.blur}
   padding-top: 0;
+  padding: ${(props) => (props.isCollapsed ? 0 : 15)}px; 
   max-height: ${(props) => (props.isCollapsed ? 0 : "100px")};
   @media (min-height: 700px) {
     max-height: ${(props) => (props.isCollapsed ? 0 : "200px")};
   }
-  @media (min-height: 900px) {
-    max-height: ${(props) => (props.isCollapsed ? 0 : "400px")};
-  }
 
   overflow-y: auto;
 

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;
@@ -274,7 +274,6 @@ class StoryPanel extends React.Component<Props, State> {
               />
             </Box>
             <Box
-              paddedRatio={3}
               backgroundColor={this.props.theme.dark}
               css={{
                 backgroundColor: this.props.theme.transparentDark,