Fix mobile design for CMS pages - correct positioning and responsive layout
This commit is contained in:
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div class="min-h-full bg-gray-50">
|
||||
<!-- Fixed Header below navigation -->
|
||||
<div class="fixed top-16 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div class="fixed top-20 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900">
|
||||
<h1 class="text-xl sm:text-4xl font-display font-bold text-gray-900">
|
||||
Einstellungen
|
||||
</h1>
|
||||
<div class="w-24 h-1 bg-primary-600 mt-2" />
|
||||
<div class="w-16 sm:w-24 h-1 bg-primary-600 mt-1 sm:mt-2" />
|
||||
</div>
|
||||
<div class="space-x-3">
|
||||
<button
|
||||
@click="saveConfig"
|
||||
class="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
|
||||
:disabled="isSaving"
|
||||
>
|
||||
<Loader2 v-if="isSaving" :size="16" class="animate-spin mr-2" />
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Content with top padding -->
|
||||
<div class="pt-32 pb-16">
|
||||
<div class="pt-28 sm:pt-32 pb-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<!-- Loading State -->
|
||||
|
||||
Reference in New Issue
Block a user