fix(frontend): preview / file name width

MiracleHorizon · Apr 10, 2024 · b143eaa · b143eaa
1 parent 5b534d2
commit b143eaa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/apps/frontend/src/widgets/Preview/Preview.module.css b/apps/frontend/src/widgets/Preview/Preview.module.css
@@ -1,6 +1,6 @@
 .root {
   position: relative;
-  width: calc(100% - var(--settings-panel-width));
+  width: calc(100dvw - var(--settings-panel-width));
 }
 
 .root:has(> .driver-active-element) {
@@ -17,13 +17,13 @@
 
 @media screen and (min-width: 2400px) {
   .root {
-    width: calc(100% - var(--settings-panel-width-2400));
+    width: calc(100dvw - var(--settings-panel-width-2400));
   }
 }
 
 @media screen and (max-width: 1200px) {
   .root {
-    width: calc(100% - var(--settings-panel-width-1200));
+    width: calc(100dvw - var(--settings-panel-width-1200));
   }
 }
 

diff --git a/apps/frontend/src/widgets/Preview/UploadedFile/UploadedFileCard/UploadedFileCard.tsx b/apps/frontend/src/widgets/Preview/UploadedFile/UploadedFileCard/UploadedFileCard.tsx
@@ -37,7 +37,7 @@ export const UploadedFileCard: FC<Props> = ({ file }) => {
           </Flex>
         </MediaQuery>
 
-        <Flex direction='column' gap='1' mr='auto' className={styles.content}>
+        <Flex width='100%' direction='column' gap='1' mr='auto' className={styles.content}>
           <Text title={file.name} truncate className={styles.fileName}>
             {file.name}
           </Text>

diff --git a/...ntend/src/widgets/Preview/UploadedFile/UploadedFilePreview/UploadedFilePreview.module.css b/...ntend/src/widgets/Preview/UploadedFile/UploadedFilePreview/UploadedFilePreview.module.css
@@ -49,6 +49,12 @@
   transform: translate3d(-50%, -50%, 0);
 }
 
+@media screen and (max-width: 767px) {
+  .root {
+    height: 30dvh;
+  }
+}
+
 @media screen and (max-width: 519px) {
   .fullscreenIcon {
     width: 34px;