EP/myep-team
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show scrollbars only when an inner area overflows

Browse Source
This commit is contained in:
fromme committed 2026-10-20 14:17:58 +02:00
1 parent e31f607f66
commit 3f806669c6
8 files changed
+25 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/styles/app.css
+12
View File
@@ -32,3 +32,15 @@
cursor: pointer;
}
}
/*
* Thin scrollbars without a track for inner scrolling areas. The page scrollbar takes its
* style from <html>, which body * leaves out. Firefox and Chrome/Edge 121+ honour these;
* Safari keeps its own overlay scrollbars.
*/
@layer base {
body * {
scrollbar-width: thin;
scrollbar-color: var(--color-gray-300) transparent;
}
}
assets/styles/components/timeline.css
+1 -1
View File
@@ -1,4 +1,4 @@
.scroll-container {
@apply overflow-scroll;
@apply overflow-auto;
max-height: calc(100vh - 320px);
}
templates/_partials/_assignment_info_compact.html.twig
+1 -1
View File
@@ -4,7 +4,7 @@
<dt class="text-sm font-bold leading-6 text-gray-900">
Jobprofil
</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0 max-h-96 overflow-y-scroll">
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0 max-h-96 overflow-y-auto pr-3">
<strong>{{ assignment.jobProfile.name }}</strong>
{% if assignment.jobProfileInfo %}
<div class="pt-2">
templates/admin/index.html.twig
+5 -5
View File
@@ -61,7 +61,7 @@
<span>{{ newContractsCount }} neu, {{ pendingContractsCount }} in Bearbeitung</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for document in newContracts %}
{% set assignment = document.disposition.assignment %}
@@ -95,7 +95,7 @@
<span>{{ newInvoicesCount }} neu, {{ pendingInvoicesCount }} in Bearbeitung</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for document in newInvoices %}
{% set assignment = document.disposition.assignment %}
@@ -128,7 +128,7 @@
<span>{{ newDriverLicensesCount }} neu</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for document in newDriverLicenses %}
<li class="py-2 first:pt-0 last:pb-0">
@@ -242,7 +242,7 @@
<span>{{ overdueFeedbacksCount }} überfällig</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for disposition in overdueFeedbacks %}
{% set assignment = disposition.assignment %}
@@ -278,7 +278,7 @@
<span>{{ overdueContractsCount }} überfällig</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for disposition in overdueContracts %}
{% set assignment = disposition.assignment %}
templates/forms.html.twig
+1 -1
View File
@@ -269,7 +269,7 @@
<div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
{{ icon('dots', 'w-4 h-4 mt-2') }}
</div>
<div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
<div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-auto px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
{% for item in form.children %}
{{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
{% endfor %}
templates/htmx_modal.html.twig
+1 -1
View File
@@ -12,7 +12,7 @@
{{ icon('close', 'w-6 h-6')}}
</button>
</div>
<div class="h-96 overflow-y-scroll">
<div class="h-96 overflow-y-auto">
<div class="px-8">
{% block content %}{% endblock %}
</div>
templates/layout.html.twig
+1 -1
View File
@@ -47,7 +47,7 @@
{{ icon('close', 'w-8 h-8') }}
</button>
</div>
<div class="w-full h-full p-8 pt-0 overflow-y-scroll">
<div class="w-full h-full p-8 pt-0 overflow-y-auto">
{% block mobile_menu %}{% endblock %}
</div>
</div>
templates/manager/index.html.twig
+3 -3
View File
@@ -9,7 +9,7 @@
<span>{{ newContractsCount }} neu, {{ pendingContractsCount }} in Bearbeitung</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for document in newContracts %}
{% set assignment = document.disposition.assignment %}
@@ -42,7 +42,7 @@
<span>{{ newInvoicesCount }} neu, {{ pendingInvoicesCount }} in Bearbeitung</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for document in newInvoices %}
{% set assignment = document.disposition.assignment %}
@@ -96,7 +96,7 @@
<span>{{ overdueFeedbacksCount }} überfällig</span>
{% endif %}
</h2>
<div class="max-h-64 overflow-y-scroll overflow-x-hidden">
<div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
<ul class="divide-y divide-gray-200">
{% for disposition in overdueFeedbacks %}
{% set assignment = disposition.assignment %}