FileCard updatd

src/components/FIleCard/Signature.tsx

@@ -16,10 +16,8 @@ export const Signature: React.FC<SignatureProps> = props => {
     )
 
     return (
-        <>
-            <Tooltip overlayClassName={'hudozka'} placement="left" trigger={['hover', 'click']} overlay={content}>
-                <FiShield className={s.secure} size={20} />
-            </Tooltip>
-        </>
+        <Tooltip overlayClassName={'hudozka'} placement="left" trigger={['hover', 'click']} overlay={content}>
+            <FiShield className={s.secure} size={20} />
+        </Tooltip>
     )
 }

src/components/FIleCard/filecard.module.css

@@ -1,7 +1,10 @@
 .file {
-  display: flex;
+  display: grid;
   flex-direction: row;
 
+  grid-template-columns: 100px auto 150px;
+  gap: var(--size-m);
+
   margin-bottom: var(--size-l);
 }
 
@@ -9,13 +12,7 @@
   box-shadow: var(--shadow);
 }
 
-.name {
-  margin-left: var(--size-m);
-  flex-grow: 7;
-}
-
 .info {
-  flex-grow: 1;
   font-size: var(--font-size-second);
   text-align: right;
 }

src/components/FIleCard/index.tsx

@@ -22,8 +22,8 @@ export const FileCard: React.FC<FileCardProps> = props => {
                         className={s.image}
                         loader={({ src, width, quality }) => {
                             return getResizedUrl(src, {
-                                width: 200,
-                                height: 200,
+                                width,
+                                height: width,
                                 n: 1,
                             })
                         }}
@@ -35,17 +35,13 @@ export const FileCard: React.FC<FileCardProps> = props => {
                 </div>
             </a>
 
-            <div className={s.name}>
-                <span style={{
-                    display: 'flex',
-                }}>
-                    {!props.sign ? null : (
-                        <Signature
-                            {...props.sign}
-                        />
-                    )}
-                    <a href={props.url}>{props.title}</a>
-                </span>
+            <div>
+                {!props.sign ? null : (
+                    <Signature
+                        {...props.sign}
+                    />
+                )}
+                <a href={props.url}>{props.title}</a>
             </div>
 
             <div className={s.info}>

src/components/FIleCard/signature.module.css

@@ -1,5 +1,7 @@
 .secure {
-  padding-right: 10px;
+  padding-right: var(--size-xs);
+  position: relative;
+  top: 2px;
 }
 
 .signature{