adaptive design added

web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx

@@ -25,8 +25,9 @@ export default function TorrentCache({ cache, cacheMap, isMini }) {
 
   useEffect(() => {
     // initializing stageSettings
-    isMini ? updateStageSettings(24, 4) : updateStageSettings(12, 2)
-  }, [isMini])
+    if (isMini) return dimensions.width < 500 ? updateStageSettings(20, 3) : updateStageSettings(24, 4)
+    updateStageSettings(12, 2)
+  }, [isMini, dimensions.width])
 
   const { boxHeight, strokeWidth, marginBetweenBlocks, stageOffset } = stageSettings
   const preloadPiecesAmount = Math.round(cache.Capacity / cache.PiecesLength - 1)
@@ -40,7 +41,7 @@ export default function TorrentCache({ cache, cacheMap, isMini }) {
   let activeId = null
 
   return (
-    <Measure bounds onResize={contentRect => setDimensions(contentRect.bounds)}>
+    <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
       {({ measureRef }) => (
         <div ref={measureRef}>
           <DialogContent style={{ padding: 0 }}>

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -251,7 +251,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
               </Button>
             </CacheSection>
 
-            <TorrentFilesSection>
+            {/* <TorrentFilesSection>
               <SectionTitle mb={20}>Torrent Content</SectionTitle>
 
               {!playableFileList?.length ? (
@@ -309,7 +309,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                   </Table>
                 </>
               )}
-            </TorrentFilesSection>
+            </TorrentFilesSection> */}
           </DialogContentGrid>
         )}
       </div>

web/src/components/DialogTorrentDetailsContent/style.js

@@ -8,6 +8,15 @@ export const DialogContentGrid = styled.div`
   grid-template-areas:
     'main cache'
     'file-list file-list';
+
+  @media (max-width: 1450px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, min-content);
+    grid-template-areas:
+      'main'
+      'cache'
+      'file-list';
+  }
 `
 export const Poster = styled.div`
   ${({ poster }) => css`
@@ -33,6 +42,22 @@ export const Poster = styled.div`
             transform: scale(2.5) translateY(-3px);
           }
         `}
+
+    @media (max-width: 1280px) {
+      align-self: start;
+    }
+
+    @media (max-width: 840px) {
+      height: 200px;
+
+      ${!poster &&
+      css`
+        width: 150px;
+        svg {
+          transform: translateY(-3px);
+        }
+      `}
+    }
   `}
 `
 export const MainSection = styled.section`
@@ -42,6 +67,10 @@ export const MainSection = styled.section`
   grid-template-columns: min-content 1fr;
   gap: 30px;
   background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+
+  @media (max-width: 840px) {
+    grid-template-columns: 1fr;
+  }
 `
 
 export const MainSectionButtonGroup = styled.div`
@@ -52,6 +81,14 @@ export const MainSectionButtonGroup = styled.div`
   :not(:last-child) {
     margin-bottom: 30px;
   }
+
+  @media (max-width: 1045px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
 `
 
 export const CacheSection = styled.section`
@@ -73,6 +110,11 @@ export const SectionSubName = styled.div`
   ${({ mb }) => css`
     ${mb && `margin-bottom: ${mb}px`};
     color: #7c7b7c;
+
+    @media (max-width: 800px) {
+      ${mb && `margin-bottom: ${mb / 2}px`};
+      font-size: 11px;
+    }
   `}
 `
 
@@ -83,6 +125,11 @@ export const SectionTitle = styled.div`
     font-weight: 200;
     line-height: 1;
     word-break: break-word;
+
+    @media (max-width: 800px) {
+      font-size: 25px;
+      ${mb && `margin-bottom: ${mb / 2}px`};
+    }
   `}
 `
 
@@ -99,18 +146,28 @@ export const WidgetWrapper = styled.div`
   grid-template-columns: repeat(auto-fit, minmax(max-content, 220px));
   gap: 20px;
 
+  @media (max-width: 800px) {
+    gap: 15px;
+  }
+  @media (max-width: 410px) {
+    gap: 10px;
+  }
+
   ${({ detailedView }) =>
-    detailedView &&
-    css`
-      @media (max-width: 800px) {
-        gap: 15px;
-        grid-template-columns: repeat(2, 1fr);
-      }
-      @media (max-width: 410px) {
-        gap: 10px;
-        grid-template-columns: 1fr;
-      }
-    `}
+    detailedView
+      ? css`
+          @media (max-width: 800px) {
+            grid-template-columns: repeat(2, 1fr);
+          }
+          @media (max-width: 410px) {
+            grid-template-columns: 1fr;
+          }
+        `
+      : css`
+          @media (max-width: 840px) {
+            grid-template-columns: 1fr;
+          }
+        `}
 `
 
 export const WidgetFieldWrapper = styled.div`
@@ -206,6 +263,11 @@ export const SmallLabel = styled.div`
     font-size: 20px;
     font-weight: 300;
     line-height: 1;
+
+    @media (max-width: 800px) {
+      font-size: 18px;
+      ${mb && `margin-bottom: ${mb / 1.5}px`};
+    }
   `}
 `