diff --git a/src/App.css b/src/App.css index 433fb2b..fbd5d9b 100644 --- a/src/App.css +++ b/src/App.css @@ -396,18 +396,18 @@ .app-main { display: grid; - grid-template-columns: 56px 1fr 300px; + grid-template-columns: var(--palette-width) 1fr 300px; flex: 1; min-height: 0; overflow: hidden; } .app-shell[data-layout='desktop'] .app-main { - grid-template-columns: 56px 1fr 300px; + grid-template-columns: var(--palette-width) 1fr 300px; } .app-shell[data-layout='compact'] .app-main { - grid-template-columns: 56px 1fr; + grid-template-columns: var(--palette-width) 1fr; } .app-shell[data-layout='touch'] .app-main { @@ -2601,3 +2601,23 @@ a.statusbar-legal-link { min-width: 0; flex: 1; } + +/* The palette keeps a fixed width so the canvas never sits underneath it. + Longer translated labels are truncated with an ellipsis (full text is in the tooltip). */ +.tool-palette { + box-sizing: border-box; + flex: 0 0 var(--palette-width); + width: var(--palette-width); + min-width: 0; + max-width: var(--palette-width); + overflow: hidden; +} + +.tool-palette .tool-label { + display: block; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; +} diff --git a/src/components/AnnotationsPanel.tsx b/src/components/AnnotationsPanel.tsx index ed60b37..69184d7 100644 --- a/src/components/AnnotationsPanel.tsx +++ b/src/components/AnnotationsPanel.tsx @@ -11,6 +11,7 @@ import Tooltip from './Tooltip' import BottomSheet from './BottomSheet' import SlideDrawer from './SlideDrawer' import AnnotationAdvertisement from './AnnotationAdvertisement' +import { useT } from '../i18n' function AnnotationItem({ annotation, @@ -23,6 +24,7 @@ function AnnotationItem({ selected: boolean layoutMode: LayoutMode }) { + const t = useT() const setSelectedId = useAppStore((s) => s.setSelectedId) const updateAnnotation = useAppStore((s) => s.updateAnnotation) const removeAnnotation = useAppStore((s) => s.removeAnnotation) @@ -60,7 +62,7 @@ function AnnotationItem({