fixed google chrome mobile x scrolling

src/components/DynamicImage.jsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from "preact/hooks"
 import { Icon } from "./Icon"
 import { Spinner } from "./Spinner"
 
-// TODO убери
 export const ResponsiveRect = ({ size = null, aspect = "1024/1024", children = null, className = "", ...props }) => {
 	if (!!size) {
 		const [width, height] = size.split("x")
@@ -18,10 +17,6 @@ export const ResponsiveRect = ({ size = null, aspect = "1024/1024", children = n
 	)
 }
 
-// TODO
-// убрать ResponsiveRect из DynamicImage
-// DynamicImage всегда максимально расширяется?
-
 export const DynamicImage = ({ src, className = "", children = null, ...props }) => {
 	const [loaded, setLoaded] = useState(false)
 	const [error, setError] = useState(false)
@@ -36,8 +31,6 @@ export const DynamicImage = ({ src, className = "", children = null, ...props })
 		setError(false)
 	}, [src])
 
-	// TODO useEffect(..., [loaded]) -
-
 	return (
 		<div className={`relative w-full h-full center rounded bg-primary-faded overflow-clip ${className}`} {...props}>
 			{!error && (

src/main.jsx

@@ -1,7 +1,7 @@
-import { render } from 'preact'
-import { App } from './app.jsx'
+import { render } from "preact"
+import { App } from "./app.jsx"
 
-import './styles/tailwind.css'
-import '@fontsource-variable/inter';
+import "./styles/tailwind.css"
+import "@fontsource-variable/inter"
 
-render(<App />, document.getElementById('app'))
+render(<App />, document.getElementById("app"))

src/pages/Results/GenerationList.jsx

@@ -1,3 +1,4 @@
+import { GenerationRequest, GenerationResult } from "@/api/schemas"
 import { DynamicImage } from "@/components/DynamicImage"
 import { HStack } from "@/components/HStack"
 import { Icon } from "@/components/Icon"
@@ -11,18 +12,17 @@ const TallIconButton = ({ icon, onClick = undefined }) => {
 
 const GenerationEntry = ({ generation = null, isSelected = false, isGenerating = false, ...props }) => {
 	const selected = isSelected ? "outline outline-3 outline-blue-500 shadow" : ""
-	const baseStyle = "h-full aspect-square cursor-pointer rounded object-cover snap-center hover:opacity-75"
+	const baseStyle = "cursor-pointer snap-center hover:opacity-75 min-w-20 w-20 h-20"
 
 	return (
 		<>
 			{generation.isError || generation.isGenerating ? (
-				<div className={`${baseStyle} ${selected} bg-blue-50 text-red-500 center`} {...props}>
+				<div className={`${baseStyle} ${selected} bg-blue-50 text-red-500 center rounded p-4`} {...props}>
 					{generation.isError && <Icon icon="block" size="extra" />}
 					{generation.isGenerating && <Spinner size="big" />}
 				</div>
 			) : (
-				// <img className={`${baseStyle} ${selected}`} src={generation.images[0]} {...props} />
-				<DynamicImage className={`${baseStyle} ${selected} !mx-0 !w-auto`} src={generation.images[0]} {...props} />
+				<DynamicImage className={`${baseStyle} ${selected}`} src={generation.images[0]} {...props} />
 			)}
 		</>
 	)
@@ -46,10 +46,10 @@ export const GenerationList = ({ generations, selected, setSelected }) => {
 	}, [selected])
 
 	return (
-		<HStack className="mt-auto bg-white border-t py-6 sticky bottom-0">
+		<HStack className="mt-auto bg-white border-t py-2 md:py-6 sticky bottom-0">
 			<TallIconButton onClick={onPrevSelected} icon="arrow_left" />
 
-			<HStack stretch={false} className="h-24 p-2 overflow-x-scroll no-scrollbar snap-x snap-mandatory">
+			<HStack stretch={false} className="p-2 snap-x snap-mandatory overflow-x-scroll no-scrollbar">
 				{generations.map((gen, index) => {
 					return (
 						<GenerationEntry

src/pages/Results/ResultsScreen.jsx

@@ -22,7 +22,7 @@ export const ResultsScreen = ({ selected, setSelected, generations, onDelete, on
 			{generations.length > 0 && (
 				<Screen className={`pt-16 ${className}`}>
 					<>
-						<GenerationGrid generation={generations[selected]} />
+						<GenerationGrid generation={generations[selected]} /> todo uncomment
 						<GenerationInfo onCopy={onCopy} onDelete={onDelete} generation={generations[selected]} />
 
 						<GenerationList generations={generations} selected={selected} setSelected={setSelected} />