Fix scrolling across all pages - constrain viewport height and enable overflow scrolling

This commit is contained in:
mahdahar 2026-02-10 13:57:21 +07:00
parent 08337b300d
commit 96e031bda1
11 changed files with 16 additions and 16 deletions

View File

@ -5,7 +5,7 @@ $roleConfig = $config['admin'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="dashboard"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="dashboard">
<?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?> <?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_unval'); ?> <?= $this->include('shared/dialog_unval'); ?>

View File

@ -5,7 +5,7 @@ $roleConfig = $config['admin'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="validatePage"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="validatePage">
<?= $this->include('shared/content_validation', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_validation', ['config' => $roleConfig]); ?>
</main> </main>
<?= $this->endSection(); ?> <?= $this->endSection(); ?>

View File

@ -5,7 +5,7 @@ $roleConfig = $config['cs'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="dashboard"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="dashboard">
<?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?> <?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_unval'); ?> <?= $this->include('shared/dialog_unval'); ?>

View File

@ -5,7 +5,7 @@ $roleConfig = $config['lab'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="dashboard"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="dashboard">
<?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?> <?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_unval'); ?> <?= $this->include('shared/dialog_unval'); ?>

View File

@ -5,7 +5,7 @@ $roleConfig = $config['lab'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="validatePage"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="validatePage">
<?= $this->include('shared/content_validation', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_validation', ['config' => $roleConfig]); ?>
</main> </main>
<?= $this->endSection(); ?> <?= $this->endSection(); ?>

View File

@ -5,9 +5,9 @@ $roleConfig = $config['phlebo'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-2 flex-1 flex flex-col items-center" x-data="collectionPage"> <main class="p-2 flex-1 flex flex-col items-center overflow-hidden min-h-0" x-data="collectionPage">
<div class="card bg-base-100 shadow-lg border border-base-200 w-full max-w-4xl"> <div class="card bg-base-100 shadow-lg border border-base-200 w-full max-w-4xl h-full">
<div class="card-body p-4"> <div class="card-body p-4 overflow-y-auto">
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
<h2 class="card-title text-xl font-bold flex items-center gap-2"> <h2 class="card-title text-xl font-bold flex items-center gap-2">
<i class="fa fa-vial text-primary"></i> Specimen Collection <i class="fa fa-vial text-primary"></i> Specimen Collection

View File

@ -5,7 +5,7 @@ $roleConfig = $config['phlebo'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="dashboard"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="dashboard">
<?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?> <?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_unval'); ?> <?= $this->include('shared/dialog_unval'); ?>

View File

@ -35,8 +35,8 @@
</style> </style>
</head> </head>
<body class="bg-base-200 min-h-screen" x-data="main"> <body class="bg-base-200 h-screen overflow-hidden" x-data="main">
<div class="flex flex-col min-h-screen"> <div class="flex flex-col h-full">
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar bg-base-100 shadow-md px-6 z-20"> <nav class="navbar bg-base-100 shadow-md px-6 z-20">
<div class='flex-1'> <div class='flex-1'>

View File

@ -1,7 +1,7 @@
<?= $this->extend('shared/layout'); ?> <?= $this->extend('shared/layout'); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="dashboard"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="dashboard">
<?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_requests', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?> <?= $this->include('shared/dialog_sample', ['config' => $roleConfig]); ?>
<?= $this->include('shared/dialog_unval'); ?> <?= $this->include('shared/dialog_unval'); ?>

View File

@ -2,9 +2,9 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<div x-data="users" class="contents"> <div x-data="users" class="contents">
<main class="p-4 flex-1 flex flex-col gap-2 max-w-6xl w-full mx-auto"> <main class="p-4 flex-1 flex flex-col gap-2 max-w-6xl w-full mx-auto overflow-hidden min-h-0">
<div class="card bg-base-100 shadow-xl border border-base-200"> <div class="card bg-base-100 shadow-xl border border-base-200 h-full">
<div class="card-body p-4"> <div class="card-body p-4 overflow-y-auto">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold flex items-center gap-2 text-base-content"> <h2 class="text-2xl font-bold flex items-center gap-2 text-base-content">
<i class="fa fa-users text-primary"></i> User Management <i class="fa fa-users text-primary"></i> User Management

View File

@ -5,7 +5,7 @@ $roleConfig = $config['superuser'];
<?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?> <?= $this->extend('shared/layout', ['roleConfig' => $roleConfig]); ?>
<?= $this->section('content'); ?> <?= $this->section('content'); ?>
<main class="p-4 flex-1 flex flex-col gap-2" x-data="validatePage"> <main class="p-4 flex-1 flex flex-col gap-2 overflow-hidden min-h-0" x-data="validatePage">
<?= $this->include('shared/content_validation', ['config' => $roleConfig]); ?> <?= $this->include('shared/content_validation', ['config' => $roleConfig]); ?>
</main> </main>
<?= $this->endSection(); ?> <?= $this->endSection(); ?>