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:
14
app/page.tsx
14
app/page.tsx
@@ -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={() => {
|
||||
|
||||
Reference in New Issue
Block a user