fix(FN-2137): right-align usage modal footer actions

- Wrap the Refresh and Close footer buttons in a dedicated right-aligned action group
- Preserve existing refresh/close behavior while improving footer layout consistency
- Add .usage-actions-right styles with token-based spacing and margin-left auto

packages/dashboard/app/components/UsageIndicator.tsx

@@ -493,18 +493,20 @@ export function UsageIndicator({ isOpen, onClose, projectId }: UsageIndicatorPro
               <span>Last updated: {lastUpdated.toLocaleTimeString()}</span>
             )}
           </div>
-          <button
-            className="btn btn-sm"
-            onClick={handleRefresh}
-            disabled={loading || isRefreshing}
-            data-testid="usage-refresh-btn"
-          >
-            <RefreshCw size={14} className={isRefreshing ? "spin" : ""} style={{ marginRight: 6 }} />
-            Refresh
-          </button>
-          <button className="btn btn-primary btn-sm" onClick={onClose}>
-            Close
-          </button>
+          <div className="usage-actions-right">
+            <button
+              className="btn btn-sm"
+              onClick={handleRefresh}
+              disabled={loading || isRefreshing}
+              data-testid="usage-refresh-btn"
+            >
+              <RefreshCw size={14} className={isRefreshing ? "spin" : ""} style={{ marginRight: 6 }} />
+              Refresh
+            </button>
+            <button className="btn btn-primary btn-sm" onClick={onClose}>
+              Close
+            </button>
+          </div>
         </div>
       </div>
     </div>

packages/dashboard/app/styles.css

@@ -14467,6 +14467,13 @@ html .column.drag-over * {
   flex: 1;
 }
 
+.usage-actions-right {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  margin-left: auto;
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
   .usage-modal {