From 9b98886682105d993f4f63b3576a345da589f131 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 8 Oct 2024 15:32:55 +0500
Subject: [PATCH] fixed

---
 src/components/Main/Contacts.tsx       | 2 +-
 src/components/Main/Project.tsx        | 6 +++---
 src/components/Main/SliderControls.tsx | 2 +-
 src/components/Main/Teaching.tsx       | 2 +-
 src/ui/SliderWithScaling.tsx           | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Main/Contacts.tsx b/src/components/Main/Contacts.tsx
index 0e78412..33ed4f1 100644
--- a/src/components/Main/Contacts.tsx
+++ b/src/components/Main/Contacts.tsx
@@ -42,7 +42,7 @@ export function Contacts() {
           color="secondary"
           className="py-4"
           width="full"
-          icon={<MailIcon />}
+          icon={<ClassNameWrapper element={<MailIcon />} className="w-8 h-8" />}
           onClick={() => {
             window.location.href = 'mailto:info@graff.tech';
           }}
diff --git a/src/components/Main/Project.tsx b/src/components/Main/Project.tsx
index 58632f7..d683f21 100644
--- a/src/components/Main/Project.tsx
+++ b/src/components/Main/Project.tsx
@@ -12,7 +12,7 @@ export function Project({ src, title, tags, media, year }: IProject<Media>) {
       className="relative flex flex-col aspect-square"
     >
       {media === Media.img ? (
-        <div className="flex flex-1">
+        <div className="flex aspect-[4/3]">
           <img
             className="object-cover object-center w-full pointer-events-none"
             src={src}
@@ -20,7 +20,7 @@ export function Project({ src, title, tags, media, year }: IProject<Media>) {
           />
         </div>
       ) : (
-        <div className="flex flex-1">
+        <div className="flex aspect-[4/3]">
           <video
             ref={videoRef}
             src={src}
@@ -28,7 +28,7 @@ export function Project({ src, title, tags, media, year }: IProject<Media>) {
             loop
             playsInline
             autoPlay
-            className="flex-1 object-cover object-center w-full h-full -mb-px"
+            className="flex-1 object-cover object-center aspect-[4/3] -mb-px w-fullh-full"
           />
         </div>
       )}
diff --git a/src/components/Main/SliderControls.tsx b/src/components/Main/SliderControls.tsx
index badf0a5..a34346d 100644
--- a/src/components/Main/SliderControls.tsx
+++ b/src/components/Main/SliderControls.tsx
@@ -40,7 +40,7 @@ export const SliderControls = forwardRef<
 
     return (
       <div className={'flex items-center gap-2 ' + className}>
-        <div className="relative flex justify-center max-sm:order-2">
+        <div className="relative flex justify-center flex-1 max-sm:w-full max-sm:order-2">
           <svg
             width={width}
             height={height}
diff --git a/src/components/Main/Teaching.tsx b/src/components/Main/Teaching.tsx
index 1260014..633042f 100644
--- a/src/components/Main/Teaching.tsx
+++ b/src/components/Main/Teaching.tsx
@@ -142,7 +142,7 @@ function TeachingFeaturesForOtherScreens() {
         </div>
         <img
           src="/images/teaching/modal.png"
-          className="rounded-md max-sm:absolute sm:-bottom-1 max-sm:left-[calc(101/360*100vw)] top-[calc(97/300*100%)]"
+          className="rounded-md max-sm:absolute sm:-bottom-1 max-sm:left-[calc(101/360*100vw)] top-[calc(97/300*100%)] object-cover"
           alt="Управление пользователями"
         />
       </div>
diff --git a/src/ui/SliderWithScaling.tsx b/src/ui/SliderWithScaling.tsx
index 80d679c..24edb56 100644
--- a/src/ui/SliderWithScaling.tsx
+++ b/src/ui/SliderWithScaling.tsx
@@ -140,13 +140,13 @@ export function SliderWithScaling<T extends { title: string; id: number }>({
         onLeftClick={prevSlide}
         onRightClick={nextSlide}
         slidesCount={slides.length}
-        width={width >= 640 ? 132 : ((width - 32) / 328) * 196}
+        width={width >= 640 ? 132 : (width / 360) * 196}
         height={width >= 640 ? 66 : 58}
         className={
-          'absolute ' +
+          'max-lg:absolute ' +
           (controlsPosition === 'top'
-            ? 'top-[75px]'
-            : 'lg:bottom-16 -bottom-10 sm:self-end self-center')
+            ? 'top-[70px]'
+            : 'lg:bottom-16 -bottom-4 sm:bottom-10 max-sm:self-center self-end max-sm:w-full')
         }
       />
     </div>