правки поехавшей разметки

src/components/CardCompact.js

@@ -8,7 +8,7 @@ const CardCompact = ({item}) => {
         item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
     ) : null;
     return (
-        <Card className="mb-auto" style={{width: '14rem'}}>
+        <Card className="mb-auto mx-auto" style={{width: '20rem'}}>
             <Card.Img variant="top" src={image}/>
             <Card.Body>
                 <Card.Title>{item.title}</Card.Title>

src/components/RecommendationModal.js

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
 import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap';
-import axios from "axios";
 import {useToast} from "../hooks/useToast";
 import {radarr} from "../contexts/client";
 
@@ -21,6 +20,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
     const [monitor, setMonitor] = useState(null)
     const [film, setFilm] = useState(false)
     const {addToast} = useToast();
+    const rating = item?.ratings?.imdb?.value ?? null;
 
     useEffect(() => {
         radarr().get("api/v3/qualityprofile")
@@ -28,6 +28,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                 setMovieQuality(r.data)
             })
             .catch((err) => addToast(err, 'danger'));
+        // eslint-disable-next-lint
     }, []);
 
     const handleSubmit = () => {
@@ -77,19 +78,24 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
             <Modal.Header closeButton>
                 <Modal.Title>{item.title}</Modal.Title>
             </Modal.Header>
-            <Modal.Body>
+            <Modal.Body className="d-flex flex-column flex-md-row">
-                <Container fluid='xl'>
+                <Container fluid>
-                    <Row>
+                    <Row className="align-items-start">
-                        <Col sm={{span: 3}}>
+                        <Col md={3} className="mb-3">
                             <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title} />
                         </Col>
-                        <Col className="col-9 container text-center">
+                        <Col md={9} className="d-flex flex-column">
-                            <Row>
+                            <div>
-                                <div className="col">
                                 <p>{item.overview}</p>
                             </div>
-                            </Row>
+                            <div>
-                            <Row style={{width: '60%'}}>
+                                <p>Год выпуска: {item.year}</p>
+                            </div>
+                            <div className="mb-4">
+                                <p>Рейтинг: {rating}</p>
+                            </div>
+                            <div>
+                                <Row>
                                     <Col>
                                         <p style={{marginRight: '1rem'}}>Мультик</p>
                                         <FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
@@ -119,16 +125,16 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                                         </FormSelect>
                                     </Col>
                                 </Row>
+                            </div>
                         </Col>
                     </Row>
-
-                    <Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
                 </Container>
             </Modal.Body>
             <Modal.Footer>
             <Button variant="secondary" onClick={() => handleClose()}>
                     Закрыть
                 </Button>
+                <Button variant="primary" onClick={() => handleSubmit()}>Скачать</Button>
             </Modal.Footer>
         </Modal>
     );

src/contexts/client.js

@@ -1,7 +1,6 @@
 import axios from "axios";
 
-const host = "192.168.1.100:30011";
+const host = "tracker.kayashov.keenetic.pro";
-// const host = "tracker.kayashov.keenetic.pro";
 
 export const radarr = () => {
     const res = axios;

src/pages/HomePage.js

@@ -29,16 +29,17 @@ const Home = () => {
                     </Accordion.Header>
                     <Accordion.Body>
                         <Row className='row-cols-auto'>
-                            {loading ?
+                            {/*{loading ?*/}
-                                (
+                            {/*    (*/}
-                                    // Отображаем 10 скелетонов
+                            {/*        // Отображаем 10 скелетонов*/}
-                                    Array.from({length: 10}, (_, index) => (
+                            {/*        Array.from({length: 10}, (_, index) => (*/}
-                                        <Col key={`skeleton-${index}`}>
+                            {/*            <Col key={`skeleton-${index}`}>*/}
-                                            <SkeletonCompact key={index} width={300} height={400}/>
+                            {/*                <SkeletonCompact key={index} width={300} height={400}/>*/}
-                                        </Col>
+                            {/*            </Col>*/}
-                                    ))
+                            {/*        ))*/}
-                                )
+                            {/*    )*/}
-                                : movies.map(rec => (
+                            {/*    :*/}
+                                {movies.map(rec => (
                                     <Col key={`col-${rec.title}-${rec.year}`}>
                                         <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                                     </Col>

src/pages/RecommendationPage.js

@@ -19,6 +19,7 @@ export function Recommendation() {
             .then((r) => setRecommendations(r.data))
             .catch((err) => addToast(err, 'danger'))
             .finally(() => setLoading(false));
+        // eslint-disable-next-lint
     }, []);
 
     function handleModal(item) {
@@ -41,7 +42,7 @@ export function Recommendation() {
     return (
         <Container className="text-center">
             <h2 className="mt-3">Рекомендации</h2>
-            <Row className='row-cols-auto'>
+            <Row>
                 {loading ?
                     (
                         // Отображаем 10 скелетонов