From f237b8c71f6a741e1a312cad8dab1e5c05dfa817 Mon Sep 17 00:00:00 2001
From: Manu Varkey <manuvarkey@gmail.com>
Date: Thu, 10 Sep 2026 22:12:29 +0530
Subject: [PATCH 1/2] Modify resource dock style for better visual impact

See https://github.com/OpenAEC-Foundation/open-planner-studio/issues/115#issuecomment-5622164403
---
 src/components/panels/ResourcePanelCompact.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/panels/ResourcePanelCompact.tsx b/src/components/panels/ResourcePanelCompact.tsx
index 4ca0ecf4..9bf69353 100644
--- a/src/components/panels/ResourcePanelCompact.tsx
+++ b/src/components/panels/ResourcePanelCompact.tsx
@@ -42,7 +42,7 @@ export function ResourcePanelCompact() {
           >
             <span
               title={t('resource.color')}
-              className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
+              className="w-2 h-3.5 rounded-sm flex-shrink-0"
               style={{ background: ensureThemeVisible(resourceDisplayColor(r), darkTheme) }}
               data-ops-resource-color={r.id}
             />
@@ -59,9 +59,9 @@ export function ResourcePanelCompact() {
               title={t('resource.maxUnits')}
             />
             <span
-              title={overallocated ? t('resource.compact.overallocated') : t('ok')}
-              className="w-2.5 h-2.5 rounded-full flex-shrink-0"
-              style={{ background: overallocated ? 'var(--error)' : 'var(--success)' }}
+              title={overallocated ? t('resource.compact.overallocated') : undefined}
+              className={`w-2 h-2 rounded-full flex-shrink-0 ${overallocated ? '' : 'invisible'}`}
+              style={{ background: 'var(--error)' }}
             />
           </div>
         );

From 141882d983c89846e7df33b2f1e1fb617284e7c1 Mon Sep 17 00:00:00 2001
From: Manu Varkey <manuvarkey@gmail.com>
Date: Mon, 14 Sep 2026 17:30:58 +0530
Subject: [PATCH 2/2] Replace coloured dot with warning symbol

Replace coloured dot for resource over allocation with warning symbol. As per https://github.com/OpenAEC-Foundation/open-planner-studio/pull/117#pullrequestreview-5180731332
---
 src/components/panels/ResourcePanelCompact.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/panels/ResourcePanelCompact.tsx b/src/components/panels/ResourcePanelCompact.tsx
index 9bf69353..fcffec4c 100644
--- a/src/components/panels/ResourcePanelCompact.tsx
+++ b/src/components/panels/ResourcePanelCompact.tsx
@@ -1,5 +1,6 @@
 import { useAppStore } from '@/state/appStore';
 import { useTranslation } from 'react-i18next';
+import { AlertTriangle } from 'lucide-react';
 import { UnitsInput } from '@/components/common/UnitsInput';
 import { scopeTaskResources } from '@/utils/taskResourceScope';
 import { ensureThemeVisible, resourceDisplayColor } from '@/engine/renderer/resourcePalette';
@@ -47,6 +48,16 @@ export function ResourcePanelCompact() {
               data-ops-resource-color={r.id}
             />
             <span className="flex-1 truncate" title={r.name || r.id}>{r.name || r.id}</span>
+            {overallocated && (
+            <span
+                title={t('resource.compact.overallocated')}
+                aria-label={t('resource.compact.overallocated')}
+                className="flex items-center flex-shrink-0"
+                style={{ color: 'var(--error)' }}
+            >
+                <AlertTriangle size={14} />
+            </span>
+            )}
             <UnitsInput
               value={r.maxUnits}
               ariaLabel={t('resource.maxUnits')}
@@ -58,11 +69,6 @@ export function ResourcePanelCompact() {
               className="input !text-[11px] !px-1 !py-0.5 !w-14 text-right"
               title={t('resource.maxUnits')}
             />
-            <span
-              title={overallocated ? t('resource.compact.overallocated') : undefined}
-              className={`w-2 h-2 rounded-full flex-shrink-0 ${overallocated ? '' : 'invisible'}`}
-              style={{ background: 'var(--error)' }}
-            />
           </div>
         );
       })}