public_git/bambuddy
1
0
Fork 0
mirror of https://github.com/maziggy/bambuddy.git synced 2026-10-22 03:49:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix AMS Hum/Temp card items clipping, extend mobile breakpoint for better visibility on tablets

Browse Source
This commit is contained in:
Matteo Parenti
2026-02-14 19:36:45 +01:00
parent b6c304d4a9
commit 4d9d333a1c
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AMSHistoryModal.tsx
+12 -12
View File
@@ -187,8 +187,8 @@ export function AMSHistoryModal({
{/* Content */}
<div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-80px)]">
{/* Time Range & Mode Selector */}
<div className="flex items-center justify-between">
<div className="flex gap-1 rounded-lg p-1" style={{ backgroundColor: cardBg }}>
<div className="flex items-center justify-between max-[511px]:flex-col max-[511px]:items-start max-[511px]:gap-3">
<div className="inline-flex gap-1 rounded-lg p-1 max-w-full flex-wrap w-fit" style={{ backgroundColor: cardBg }}>
<button
onClick={() => setMode('humidity')}
className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-md transition-colors ${
@@ -211,7 +211,7 @@ export function AMSHistoryModal({
</button>
</div>
<div className="flex gap-1 rounded-lg p-1" style={{ backgroundColor: cardBg }}>
<div className="inline-flex gap-1 rounded-lg p-1 max-w-full flex-wrap w-fit" style={{ backgroundColor: cardBg }}>
{TIME_RANGES.map(range => (
<button
key={range.value}
@@ -228,10 +228,10 @@ export function AMSHistoryModal({
</div>
{/* Stats Cards */}
<div className="grid grid-cols-4 gap-4">
<div className="grid grid-cols-4 gap-4 max-[511px]:grid-cols-2">
{mode === 'humidity' ? (
<>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-2" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.current', 'Current')}</p>
<div className="flex items-center gap-2">
<p className="text-2xl font-bold" style={{ color: getHumidityColor(currentHumidity) }}>
@@ -240,19 +240,19 @@ export function AMSHistoryModal({
<TrendIcon trend={humidityTrend} />
</div>
</div>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-4" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.average', 'Average')}</p>
<p className="text-2xl font-bold" style={{ color: textPrimary }}>
{data?.avg_humidity != null ? `${data.avg_humidity}%` : '—'}
</p>
</div>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-1" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.min', 'Min')}</p>
<p className="text-2xl font-bold text-green-500">
{data?.min_humidity != null ? `${data.min_humidity}%` : '—'}
</p>
</div>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-3" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.max', 'Max')}</p>
<p className="text-2xl font-bold text-red-500">
{data?.max_humidity != null ? `${data.max_humidity}%` : '—'}
@@ -261,7 +261,7 @@ export function AMSHistoryModal({
</>
) : (
<>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-2" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.current', 'Current')}</p>
<div className="flex items-center gap-2">
<p className="text-2xl font-bold" style={{ color: getTempColor(currentTemp) }}>
@@ -270,19 +270,19 @@ export function AMSHistoryModal({
<TrendIcon trend={tempTrend} />
</div>
</div>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-4" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.average', 'Average')}</p>
<p className="text-2xl font-bold" style={{ color: textPrimary }}>
{data?.avg_temperature != null ? `${data.avg_temperature}°C` : '—'}
</p>
</div>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-1" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.min', 'Min')}</p>
<p className="text-2xl font-bold text-blue-500">
{data?.min_temperature != null ? `${data.min_temperature}°C` : '—'}
</p>
</div>
<div className="rounded-lg p-4" style={{ backgroundColor: cardBg }}>
<div className="rounded-lg p-4 max-[511px]:order-3" style={{ backgroundColor: cardBg }}>
<p className="text-xs" style={{ color: textSecondary }}>{t('common.max', 'Max')}</p>
<p className="text-2xl font-bold text-red-500">
{data?.max_temperature != null ? `${data.max_temperature}°C` : '—'}
frontend/src/hooks/useIsMobile.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
const MOBILE_BREAKPOINT = 768; // md breakpoint
const MOBILE_BREAKPOINT = 1144; // hide sidebar below this width
export function useIsMobile(): boolean {
const [isMobile, setIsMobile] = useState(() =>