diff --git a/gui/src/components/Toolbar.tsx b/gui/src/components/Toolbar.tsx
index fff8e87d2..d643dd1f3 100644
--- a/gui/src/components/Toolbar.tsx
+++ b/gui/src/components/Toolbar.tsx
@@ -85,7 +85,9 @@ function BasicResetButton(options: UseResetOptions & { customName?: string }) {
spacing={5}
preferedDirection={error ? 'bottom' : 'top'}
>
-
-
+
);
}
diff --git a/gui/src/components/commons/Tooltip.tsx b/gui/src/components/commons/Tooltip.tsx
index e1fa60ca0..5d1ad580b 100644
--- a/gui/src/components/commons/Tooltip.tsx
+++ b/gui/src/components/commons/Tooltip.tsx
@@ -24,6 +24,7 @@ interface TooltipProps {
disabled?: boolean;
tag?: string;
spacing?: number;
+ bindTo?: string;
}
interface TooltipPos {
@@ -468,11 +469,16 @@ export function Tooltip({
variant = 'auto',
disabled = false,
tag = 'div',
+ bindTo,
spacing = 10,
}: TooltipProps) {
const childRef = useRef(null);
const isAndroid = window.__ANDROID__?.isThere();
+ if (bindTo) {
+ childRef.current = document.querySelector(bindTo);
+ }
+
let portal = null;
if (variant === 'auto') {
portal = isAndroid ? (
@@ -508,7 +514,13 @@ export function Tooltip({
return (
<>
- {createElement(tag, { className: 'contents', ref: childRef }, children)}
+ {bindTo
+ ? children
+ : createElement(
+ tag,
+ { className: 'contents', ref: childRef },
+ children
+ )}
{!disabled && createPortal(portal, document.body)}
>
);
diff --git a/gui/src/components/tracker/TrackersTable.tsx b/gui/src/components/tracker/TrackersTable.tsx
index 371f42add..1a4fdb022 100644
--- a/gui/src/components/tracker/TrackersTable.tsx
+++ b/gui/src/components/tracker/TrackersTable.tsx
@@ -104,7 +104,6 @@ export function TrackerRotCell({
function Header({
name,
- className,
first = false,
last = false,
show = true,
@@ -116,17 +115,15 @@ function Header({
show?: boolean;
}) {
return (
-
-
-
-
- |
+
+
);
}
@@ -147,7 +144,9 @@ function Cell({
const velocity = useVelocity();
return (
-
+ |
+
);
}
@@ -171,10 +170,12 @@ function Row({
data,
highlightedTrackers,
clickedTracker,
+ gridTemplateColumns,
}: {
data: FlatDeviceTracker;
highlightedTrackers: highlightedTrackers | undefined;
clickedTracker: (tracker: TrackerDataT) => void;
+ gridTemplateColumns: string;
}) {
const { config } = useConfig();
const fontColor = config?.devSettings?.highContrast ? 'primary' : 'secondary';
@@ -191,6 +192,11 @@ function Row({
return (
+
)
}
- tag="tr"
spacing={-5}
>
<>
-
- clickedTracker(tracker)}>
+ clickedTracker(tracker)}
+ >
|
|
@@ -287,7 +291,7 @@ function Row({
).toString()}
-
+
>
@@ -307,7 +311,7 @@ export function TrackersTable({
const filteringEnabled =
config?.debug && config?.devSettings?.filterSlimesAndHMD;
const sortingEnabled = config?.debug && config?.devSettings?.sortByName;
- // TODO: fix memo
+
const filteredSortedTrackers = useMemo(() => {
const list = filteringEnabled
? flatTrackers.filter((t) => isHMD(t) || isSlime(t))
@@ -321,49 +325,62 @@ export function TrackersTable({
const moreInfo = config?.devSettings?.moreInfo;
+ const gridTemplateColumns = useMemo(() => {
+ const cols = [
+ 'minmax(150px, 1.5fr)', // Name
+ 'minmax(100px, 1fr)', // Type
+ 'minmax(60px, 1fr)', // Battery
+ '6rem', // Ping (w-24)
+ 'minmax(60px, 1fr)', // TPS
+ config?.devSettings?.preciseRotation ? '11rem' : '8rem', // Rotation
+ 'minmax(60px, 1fr)', // Temp
+ ];
+
+ if (moreInfo) {
+ cols.push('9rem'); // Linear Acc
+ cols.push('9rem'); // Position
+ cols.push('9rem'); // Stay Aligned
+ cols.push('minmax(150px, 1fr)'); // URL
+ }
+
+ return cols.join(' ');
+ }, [config?.devSettings?.preciseRotation, moreInfo]);
+
return (
-
-
+
- {filteredSortedTrackers.map((data) => (
-
- ))}
-
+
+
+ {filteredSortedTrackers.map((data) => (
+
+ ))}
+
+
);
}