From 49599f9d9a09c73330647244ea0bd5cf37772ec8 Mon Sep 17 00:00:00 2001
From: nikk gitanes <tsynik@gmail.com>
Date: Sat, 27 May 2023 18:05:23 +0300
Subject: [PATCH] other status placement

---
 web/src/components/TorrentCard/index.jsx |  8 +++-----
 web/src/components/TorrentCard/style.js  | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/src/components/TorrentCard/index.jsx b/web/src/components/TorrentCard/index.jsx
index f4dad28..7913c0b 100644
--- a/web/src/components/TorrentCard/index.jsx
+++ b/web/src/components/TorrentCard/index.jsx
@@ -113,10 +113,8 @@ const Torrent = ({ torrent }) => {
           </div>
 
           <div className='description-statistics-wrapper'>
-            <StatusIndicator stat={stat} />
-
             <div className='description-statistics-element-wrapper'>
-              <div className='description-section-name'>{t('Size')}</div>
+              <div className='description-section-name'><StatusIndicator stat={stat} />{t('Size')}</div>
               <div className='description-statistics-element-value'>{torrentSize > 0 && humanizeSize(torrentSize)}</div>
             </div>
 
@@ -195,9 +193,9 @@ export const StatusIndicator = ({ stat }) => {
   }
 
   return (
-    <div className='description-statistics-element-wrapper'>
+    <span className='description-status-wrapper'>
       <StatusIndicators color={colors[stat]} title={values[stat]} />
-    </div>
+    </span>
   )
 }
 
diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js
index 1f2d2a1..2795cbc 100644
--- a/web/src/components/TorrentCard/style.js
+++ b/web/src/components/TorrentCard/style.js
@@ -127,6 +127,14 @@ export const TorrentCardDescription = styled.div`
       }
     }
 
+    .description-status-wrapper {
+      display: inline-block;
+      height: 8px;
+      margin-inline-end: 4px;
+      margin-bottom: 4px;
+      vertical-align: middle;
+    }
+
     .description-torrent-title {
       overflow: auto;
       word-break: break-all;
@@ -134,20 +142,20 @@ export const TorrentCardDescription = styled.div`
 
     .description-statistics-wrapper {
       display: grid;
-      grid-template-columns: 24px 80px 80px 1fr;
+      grid-template-columns: 80px 80px 1fr;
       align-self: end;
 
       @media (max-width: 1260px), (max-height: 500px) {
-        grid-template-columns: 24px 70px 70px 1fr;
+        grid-template-columns: 70px 70px 1fr;
       }
 
       @media (max-width: 770px) {
-        grid-template-columns: 24px 65px 65px 1fr;
+        grid-template-columns: 65px 65px 1fr;
       }
 
       @media (max-width: 700px) {
         display: grid;
-        grid-template-columns: 24px repeat(3, 1fr);
+        grid-template-columns: repeat(3, 1fr);
       }
     }
 
@@ -155,7 +163,7 @@ export const TorrentCardDescription = styled.div`
     }
 
     .description-statistics-element-value {
-      margin-left: 0px;
+      margin-left: 5px;
       margin-bottom: 10px;
       word-break: break-all;