fix issues

frontend/app/element/progressbar.scss

@@ -4,30 +4,37 @@
 .progress-bar-container {
     position: relative;
     width: 100%;
-    background-color: var(--main-bg-color);
-    border-radius: 40px;
     overflow: hidden;
     display: flex;
     align-items: center;
-    padding: 4px;
-    border: 1px solid rgb(from var(--main-text-color) r g b / 15%);
+    justify-content: space-between;
 
-    .progress-bar-fill {
-        height: 100%;
-        transition: width 0.3s ease-in-out;
-        background-color: var(--success-color);
-        height: 4px;
-        border-radius: 9px;
+    .outer {
+        border: 1px solid rgb(from var(--main-text-color) r g b / 15%);
+        border-radius: 40px;
+        padding: 4px;
+        background-color: var(--main-bg-color);
+        flex-grow: 1;
+
+        .progress-bar-fill {
+            height: 100%;
+            transition: width 0.3s ease-in-out;
+            background-color: var(--success-color);
+            height: 4px;
+            border-radius: 9px;
+            width: 100%;
+        }
     }
 
     .progress-bar-label {
-        position: absolute;
-        right: 8px;
+        width: 40px;
+        flex-shrink: 0;
         font-size: 0.9rem;
         color: var(--main-text-color);
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
         line-height: normal;
+        text-align: right;
     }
 }

frontend/app/element/progressbar.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ProgressBar } from "./progressbar";
 
 const meta: Meta<typeof ProgressBar> = {
-    title: "Components/ProgressBar",
+    title: "Elements/ProgressBar",
     component: ProgressBar,
     args: {
         progress: 0, // Default value
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof ProgressBar>;
 export const EmptyProgress: Story = {
     render: (args) => (
         <div style={{ padding: "20px", background: "#111", color: "#fff" }}>
-            <h4>Empty Progress Bar</h4>
             <ProgressBar {...args} />
         </div>
     ),
@@ -43,7 +42,6 @@ export const EmptyProgress: Story = {
 export const FilledProgress: Story = {
     render: (args) => (
         <div style={{ padding: "20px", background: "#111", color: "#fff" }}>
-            <h4>Filled Progress Bar</h4>
             <ProgressBar {...args} />
         </div>
     ),

frontend/app/element/progressbar.tsx

@@ -22,7 +22,9 @@ const ProgressBar: React.FC<ProgressBarProps> = ({ progress, label = "Progress"
             aria-valuemax={100}
             aria-label={label}
         >
-            <div className="progress-bar-fill" style={{ width: `${progressWidth}%` }}></div>
+            <div className="outer">
+                <div className="progress-bar-fill" style={{ width: `${progressWidth}%` }}></div>
+            </div>
             <span className="progress-bar-label">{progressWidth}%</span>
         </div>
     );