From b4b8be3297e427dad6fbc6697ffdb765a796f7fd Mon Sep 17 00:00:00 2001
From: David Beall <beallio@users.noreply.github.com>
Date: Sun, 2 Aug 2026 14:26:12 -0700
Subject: fix: align plugin install progress (#944)

Co-authored-by: David Beall <6121439+beallio@users.noreply.github.com>
---
 .../components/modals/PluginInstallProgress.tsx    | 31 ++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 frontend/src/components/modals/PluginInstallProgress.tsx

(limited to 'frontend/src/components/modals/PluginInstallProgress.tsx')

diff --git a/frontend/src/components/modals/PluginInstallProgress.tsx b/frontend/src/components/modals/PluginInstallProgress.tsx
new file mode 100644
index 00000000..14fe9f34
--- /dev/null
+++ b/frontend/src/components/modals/PluginInstallProgress.tsx
@@ -0,0 +1,31 @@
+import { Field, ProgressBar } from '@decky/ui';
+import { FC } from 'react';
+
+interface PluginInstallProgressProps {
+  percentage: number;
+  operationText: string | null;
+}
+
+const PluginInstallProgress: FC<PluginInstallProgressProps> = ({ percentage, operationText }) => {
+  return (
+    <div style={{ width: '100%', margin: '16px 0 0' }}>
+      <Field bottomSeparator="none" childrenLayout="below" focusable={false} padding="standard">
+        <div style={{ width: '100%' }}>
+          <div
+            style={{
+              minHeight: '22px',
+              width: '100%',
+              textAlign: 'left',
+              textTransform: 'uppercase',
+            }}
+          >
+            {operationText}
+          </div>
+          <ProgressBar focusable={false} nProgress={percentage} />
+        </div>
+      </Field>
+    </div>
+  );
+};
+
+export default PluginInstallProgress;
-- 
cgit v1.2.3