br0uQ/librebooking-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile calendar view

Browse Source
This commit is contained in:
Joshua Schmucker 2026-02-06 14:47:37 +01:00
parent fcaf0c4c8a
commit c519f4b11f
1 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/ResourceCalendar.tsx
View File

@ -252,11 +252,14 @@ const ResourceCalendar: React.FC = () => {
? '#d4edda' ? '#d4edda'
: isToday(day) ? '#f8f9fa' : 'white', : isToday(day) ? '#f8f9fa' : 'white',
fontSize: '0.7rem', fontSize: '0.7rem',
minHeight: '35px', minHeight: isMobile ? '40px' : '35px',
height: isMobile ? '40px' : '35px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
position: 'relative' position: 'relative',
overflow: 'hidden',
boxSizing: 'border-box'
}} }}
> >
{reservation && ( {reservation && (
@ -264,32 +267,40 @@ const ResourceCalendar: React.FC = () => {
textAlign: 'center', textAlign: 'center',
color: '#333', color: '#333',
fontWeight: '500', fontWeight: '500',
padding: '0.2rem', padding: '2px',
width: '100%', width: '100%',
height: '100%', height: '100%',
overflow: 'hidden', overflow: 'hidden',
display: 'flex', display: 'flex',
flexDirection: 'column', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center',
boxSizing: 'border-box'
}}> }}>
<div style={{ <div style={{
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '0.6rem', fontSize: isMobile ? '0.5rem' : '0.6rem',
lineHeight: '1.2', lineHeight: '1',
overflow: 'hidden', overflow: 'hidden',
display: '-webkit-box', textOverflow: 'ellipsis',
WebkitLineClamp: 2, whiteSpace: 'nowrap',
WebkitBoxOrient: 'vertical' width: '100%',
maxWidth: '100%'
}}> }}>
{reservation.title} {isMobile && reservation.title.length > 8
</div> ? reservation.title.substring(0, 8) + '...'
<div style={{ : reservation.title
fontSize: '0.55rem', }
opacity: 0.8,
lineHeight: '1'
}}>
{format(new Date(reservation.startDate), 'h:mm')}
</div> </div>
{!isMobile && (
<div style={{
fontSize: '0.55rem',
opacity: 0.8,
lineHeight: '1',
marginTop: '1px'
}}>
{format(new Date(reservation.startDate), 'h:mm')}
</div>
)}
</div> </div>
)} )}
</div> </div>