Fix textview bug

frontend/packages/core/src/components/SamplePage/ImagePreviewer.tsx

@@ -191,7 +191,7 @@ const ImagePreviewer: FunctionComponent<ImagePreviewerProps> = ({
                         setWidth(ir * rect.height * 0.9);
                     } else if (ir >= r && img.naturalWidth > rect.width * 0.9) {
                         setWidth(rect.width * 0.9);
-                        setHeight(ir * rect.width * 0.9);
+                        setHeight((rect.width / ir) * 0.9);
                     } else {
                         setWidth(img.naturalWidth);
                         setHeight(img.naturalHeight);

frontend/packages/core/src/components/SamplePage/Text.tsx

@@ -104,33 +104,33 @@ const TextWrapper = styled.div`
     ${sameBorder(true)}
     ${transitionProps('border-color')}
 `;
-
+// display: grid;
+// grid-template-columns: fit-content(25%) auto;
+// grid-row-gap: ${rem(12)};
+// justify-items: stretch;
+// align-items: stretch;
+// ${transitionProps('border-color')}
 const TextGrid = styled.div`
      margin-top: ${rem(12)};
-    display: grid;
-    grid-template-columns: fit-content(25%) auto;
-    grid-row-gap: ${rem(12)};
-    justify-items: stretch;
-    align-items: stretch;
-    ${transitionProps('border-color')}
-
+     >div {
+         ${sameBorder()}
+         border-radius: ${borderRadius};
+         margin-bottom: ${rem(20)};
          > span {
+             display:block;
              height: ${rem(40)};
              line-height: 1.857142857;
              padding: ${rem(7)} 0;
          }
      
          .step {
-        ${sameBorder()}
-        border-right: none;
-        border-top-left-radius: ${borderRadius};
-        border-bottom-left-radius: ${borderRadius};
              padding-left: ${rem(8)};
              padding-right: ${rem(14)};
      
              > span {
-            display: block;
-            width: 100%;
+                 display: inline-block;
+                 width: atuo;
+                 clear:both
                  color: var(--text-light-color);
                  background-color: var(--text-chart-tag-background-color);
                  padding: 0 ${rem(8)};
@@ -140,18 +140,20 @@ const TextGrid = styled.div`
          }
      
          .text {
-        ${sameBorder()}
-        border-left: none;
-        border-top-right-radius: ${borderRadius};
-        border-bottom-right-radius: ${borderRadius};
+             padding-left: 1rem;
              padding-right: ${rem(20)};
-        ${ellipsis()}
+             display: block;
+             overflow: hidden;
+             white-space: normal;
+             word-wrap: normal;
+             height:auto;
      
              > * {
                  vertical-align: middle;
              }
          }
-`;
+     }
+ `;
 
 type TextProps = {
     index: number;
@@ -171,7 +173,7 @@ const Text: FunctionComponent<TextProps> = ({run, tag, step, wallTime, index}) =
     });
 
     return (
-        <>
+        <div>
             <span className="step">
                 <span>
                     {t('common:time-mode.step')} {step}
@@ -186,7 +188,7 @@ const Text: FunctionComponent<TextProps> = ({run, tag, step, wallTime, index}) =
                     error ?? text
                 )}
             </span>
-        </>
+        </div>
     );
 };