tweak height of token pseudo input; order tokens by created_at

Author: charliepark

app/pages/system/silos/SiloScimTab.tsx

@@ -56,10 +56,16 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 
 export default function SiloScimTab() {
   const siloSelector = useSiloSelector()
-  const { data: tokens } = usePrefetchedApiQuery('scimTokenList', {
+  const { data } = usePrefetchedApiQuery('scimTokenList', {
     query: { silo: siloSelector.silo },
   })
 
+  // Order tokens by creation date, oldest first
+  const tokens = useMemo(
+    () => [...data].sort((a, b) => a.timeCreated.getTime() - b.timeCreated.getTime()),
+    [data]
+  )
+
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [createdToken, setCreatedToken] = useState<{
     id: string
@@ -257,10 +263,10 @@ function TokenCreatedModal({
         <div className="mt-4">
           <div className="text-sans-semi-md mb-2 font-medium">Bearer Token</div>
           <div className="text-sans-sm text-raise bg-default border-default flex items-center rounded border font-mono">
-            <div className="flex-1 overflow-hidden p-3 text-ellipsis">
+            <div className="flex-1 overflow-hidden px-3 py-2 text-ellipsis">
               {token.bearerToken}
             </div>
-            <div className="border-default border-l p-3">
+            <div className="border-default border-l p-2">
               <CopyToClipboard text={token.bearerToken} />
             </div>
           </div>

mock-api/silo.ts

@@ -142,8 +142,8 @@ export const scimTokens: DbScimToken[] = [
   },
   {
     id: 'b2c3d4e5-f6a7-8901-bcde-f12345678901',
-    time_created: new Date(2025, 9, 20).toISOString(),
-    time_expires: new Date(2026, 9, 20).toISOString(),
+    time_created: new Date(2025, 8, 20).toISOString(),
+    time_expires: new Date(2026, 8, 20).toISOString(),
     siloId: defaultSilo.id,
   },
   {