Enhance the usage UI style

src/pages/UsageEventsView.css

@@ -386,25 +386,44 @@
 }
 
 .usage-request-log .usage-events-footer {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   min-height: 56px;
   flex: none;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
   gap: 12px;
   padding: 10px 14px;
   border-top: 1px solid var(--usage-log-line);
   background: var(--usage-log-surface);
 }
 
+.usage-request-log .usage-events-footer-left {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
 .usage-request-log .usage-pagination-summary,
 .usage-request-log .usage-pagination-info {
   color: var(--usage-log-muted);
   font-size: 11px;
 }
 
-.usage-request-log .usage-pagination-controls { margin-left: auto; }
+.usage-request-log .usage-pagination-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 0;
+  justify-self: end;
+}
+
+.usage-request-log .usage-col-reset-btn {
+  width: auto;
+  min-width: 92px;
+  padding: 0 10px;
+}
 
 .usage-request-log .usage-page-size-select,
 .usage-request-log .usage-page-nav-btn {
@@ -461,8 +480,13 @@
 
 @container workspace (max-width: 760px) {
   .usage-request-log .usage-events-footer {
+    grid-template-columns: 1fr;
     padding: 12px 14px;
   }
+
+  .usage-request-log .usage-pagination-controls {
+    justify-self: end;
+  }
 }
 
 @media (max-width: 760px) {
@@ -475,12 +499,12 @@
 
 @container workspace (max-width: 480px) {
   .usage-request-log .usage-events-footer {
-    justify-content: flex-start;
+    grid-template-columns: 1fr;
   }
 
   .usage-request-log .usage-pagination-controls {
     width: 100%;
-    margin-left: 0;
+    justify-content: space-between;
   }
 
   .usage-request-log .usage-pagination-right {

src/pages/UsageEventsView.tsx

@@ -791,8 +791,9 @@ export function EventsView({
       {events.items.length > 0 ? <TableTopScrollbar tableWrapRef={tableWrapRef} /> : null}
 
       <div className="usage-events-footer">
-        <span className="usage-pagination-summary">{t('usage.events.rangeSummary', { start: startRecordNum, end: endRecordNum, total: compactNumber(events.total) })}</span>
+        <div className="usage-events-footer-left">
-        <div className="usage-events-actions">
+          <span className="usage-pagination-summary">{t('usage.events.rangeSummary', { start: startRecordNum, end: endRecordNum, total: compactNumber(events.total) })}</span>
+          <div className="usage-events-actions">
           <button
             type="button"
             className="usage-col-settings-btn"
@@ -820,6 +821,7 @@ export function EventsView({
           <button type="button" className="usage-events-export-btn" disabled={loading || exporting || events.total === 0} onClick={() => void exportFilteredEvents()} title={t('usage.events.exportDescription')}>
             <Download size={14} aria-hidden="true" /><span>{exporting ? t('usage.events.exporting') : t('usage.events.exportPage')}</span>
           </button>
+          </div>
         </div>
         <div className="usage-pagination-controls">
           <select className="usage-page-size-select" value={pageSize} disabled={loading} onChange={(event) => onPageSizeChange(Number(event.currentTarget.value))} aria-label={t('usage.events.pageSize', { size: pageSize })}>