Improve mobile responsiveness and add scroll-to-top functionality

- Fix header layout to stack vertically on mobile and prevent text overflow
- Reduce table padding on mobile screens for better space utilization
- Make color swatches and text smaller on mobile devices
- Hide bullet separator on mobile for cleaner layout
- Add scroll-to-top when editing or adding filaments in admin
- Ensure all UI elements fit properly on iPhone screens
This commit is contained in:
DaX
2025-06-30 23:42:58 +02:00
parent 3bd907eaf2
commit c0682e1969
3 changed files with 29 additions and 25 deletions

View File

@@ -89,19 +89,19 @@ export default function Home() {
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
<header className="bg-gradient-to-r from-blue-50 to-orange-50 dark:from-gray-800 dark:to-gray-900 shadow-lg transition-all duration-300">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<div className="flex-1 flex justify-center gap-3 text-lg">
<span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse whitespace-nowrap">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
<div className="flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
<div className="flex-1 flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-3 text-sm sm:text-lg">
<span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse text-center">
Kupovina po gramu dostupna
</span>
<span className="text-gray-400 dark:text-gray-600"></span>
<span className="text-orange-700 dark:text-orange-300 font-medium animate-pulse whitespace-nowrap">
<span className="hidden sm:inline text-gray-400 dark:text-gray-600"></span>
<span className="text-orange-700 dark:text-orange-300 font-medium animate-pulse text-center">
Popust za 5+ komada
</span>
</div>
<div className="flex-shrink-0 ml-4">
<div className="flex-shrink-0">
{mounted ? (
<button
onClick={() => {