fix: avatar image overlays initials, chart canvas responsive sizing
Avatar bug:
- base.css: .lt-avatar now position:relative; img is position:absolute inset:0
so a loaded image covers the initials span (fixes img+initials shown together)
- base.css: .lt-avatar img.lt-avatar-img-err { display:none } — CSS hook for error state
- layout_footer.php: capture-phase error event delegation on .lt-avatar imgs
replaces blocked inline onerror handlers (CSP has no unsafe-inline in script-src)
Chart bug:
- DashboardView: replaced display:flex section-body containers with a
position:relative; width:100%; height:170px div wrapper for each canvas
(Chart.js responsive:true reads parentNode dimensions; flex containers
give canvas zero intrinsic width causing 0×0 render = empty charts)
- Removed has-lt-overlay from chart frames (no overlay div was injected)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+12
-1
@@ -4490,8 +4490,19 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
position: relative; /* needed so img can overlay initials absolutely */
|
||||
}
|
||||
.lt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
/* Image overlays initials — hidden by JS (.lt-avatar-img-err) when broken */
|
||||
.lt-avatar img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
/* When the image fails, JS adds .lt-avatar-img-err to hide it, revealing initials */
|
||||
.lt-avatar img.lt-avatar-img-err { display: none; }
|
||||
/* Sizes */
|
||||
.lt-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; }
|
||||
.lt-avatar--sm { width: 2rem; height: 2rem; font-size: 0.65rem; }
|
||||
|
||||
Reference in New Issue
Block a user