🎨 Improve header layout and responsiveness in Gamemaster Explorer view

This commit is contained in:
2026-01-28 20:17:54 +00:00
parent e9a461a478
commit fd4d1d1358

View File

@@ -25,8 +25,10 @@
<div v-else class="explorer-container"> <div v-else class="explorer-container">
<!-- Header --> <!-- Header -->
<header class="explorer-header"> <header class="explorer-header">
<router-link to="/" class="back-button"> Back Home</router-link> <div class="header-left">
<h1>🔍 Gamemaster Explorer</h1> <router-link to="/" class="back-button"> Back Home</router-link>
<h1>🔍 Gamemaster Explorer</h1>
</div>
<div class="header-controls"> <div class="header-controls">
<button <button
@click="showHelp = !showHelp" @click="showHelp = !showHelp"
@@ -858,11 +860,19 @@ onMounted(() => {
.explorer-header { .explorer-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.header-left {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.explorer-header h1 { .explorer-header h1 {
margin: 0; margin: 0;
font-size: 2.5rem; font-size: 2.5rem;
@@ -1301,10 +1311,26 @@ onMounted(() => {
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.explorer-header {
flex-direction: column;
align-items: flex-start;
}
.header-left {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.explorer-header h1 { .explorer-header h1 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.header-controls {
align-self: flex-end;
margin-top: 0.5rem;
}
.file-selector, .file-selector,
.property-filter { .property-filter {
flex-direction: column; flex-direction: column;