1  <script lang="ts">
 2    import Id from "@app/components/Id.svelte";
 3  
 4    export let agent: string;
 5  </script>
 6  
 7  <style>
 8    .agent {
 9      color: var(--color-fill-gray);
10      font-family: var(--font-family-monospace);
11      font-size: var(--font-size-small);
12      max-width: 19rem;
13      margin-right: 2.25rem;
14    }
15    .item {
16      display: flex;
17      flex-wrap: nowrap;
18      align-items: center;
19      justify-content: space-between;
20      gap: 0.5rem;
21      font-size: var(--font-size-small);
22      width: 100%;
23    }
24    @media (max-width: 1010.98px) {
25      .agent {
26        max-width: 10rem;
27      }
28    }
29  </style>
30  
31  <div class="item">
32    <div style:white-space="nowrap">User Agent</div>
33    <Id ariaLabel="agent" id={agent} shorten={false} style="none">
34      <div class="agent">
35        <div class="txt-overflow">{agent}</div>
36      </div>
37    </Id>
38  </div>