Removed Tag component.

components/common/Tag.js

@@ -1,8 +0,0 @@
-import classNames from 'classnames';
-import styles from './Tag.module.css';
-
-function Tag({ className, children }) {
-  return <span className={classNames(styles.tag, className)}>{children}</span>;
-}
-
-export default Tag;

components/common/Tag.module.css

@@ -1,7 +0,0 @@
-.tag {
-  padding: 4px 6px;
-  border-radius: 4px;
-  margin-right: 10px;
-  color: var(--primary400);
-  background: var(--blue100);
-}

components/metrics/QueryParametersTable.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { safeDecodeURI } from 'next-basics';
-import Tag from 'components/common/Tag';
 import FilterButtons from 'components/common/FilterButtons';
 import { paramFilter } from 'lib/filters';
 import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
+import styles from './QueryParametersTable.module.css';
 
 const filters = {
   [FILTER_RAW]: null,
@@ -38,10 +38,10 @@ export default function QueryParametersTable({ websiteId, showFilters, ...props
           filter === FILTER_RAW ? (
             x
           ) : (
-            <>
-              <Tag>{safeDecodeURI(p)}</Tag>
-              {safeDecodeURI(v)}
-            </>
+            <div className={styles.item}>
+              <div className={styles.param}>{safeDecodeURI(p)}</div>
+              <div className={styles.value}>{safeDecodeURI(v)}</div>
+            </div>
           )
         }
         delay={0}

components/metrics/QueryParametersTable.module.css

@@ -0,0 +1,16 @@
+.item {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 1px;
+}
+
+.param {
+  padding: 0 8px;
+  color: var(--primary400);
+  background: var(--blue100);
+  border-radius: 4px;
+}
+
+.value {
+  padding: 0 8px;
+}