From 842f733638c132c36e44e85de941b3b883141b2e Mon Sep 17 00:00:00 2001
From: adam <me@adamksmith.xyz>
Date: Sat, 7 Mar 2026 19:07:14 +0000
Subject: [PATCH] Add tree-line connector for RAID child drives in host drives
 card

---
 frontend/src/App.jsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e2908b2..7783844 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -698,9 +698,20 @@ function HostDrivesCard({ drives, onSelect, t }) {
                   </span>
                 )}
               </div>
-              {d.physical_drives?.map((pd, i) => (
-                <HostDriveRow key={pd.serial || i} d={pd} onSelect={onSelect} t={t} indent />
-              ))}
+              {d.physical_drives?.length > 0 && (
+                <div style={{ marginLeft: 20, borderLeft: `2px solid ${t.cardBorder}`, paddingLeft: 0 }}>
+                  {d.physical_drives.map((pd, i) => (
+                    <div key={pd.serial || i} style={{ display: "flex", alignItems: "center", marginTop: 4 }}>
+                      <div style={{
+                        width: 16, height: 1, background: t.cardBorder, flexShrink: 0,
+                      }} />
+                      <div style={{ flex: 1 }}>
+                        <HostDriveRow d={pd} onSelect={onSelect} t={t} indent />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
             </React.Fragment>
           ))}
         </div>