From 136db3e74b8f7ef7b3c98e6959c94ebbfd43f934 Mon Sep 17 00:00:00 2001
From: James Gatz <jamesgatzos@gmail.com>
Date: Mon, 1 Jul 2024 16:19:03 +0200
Subject: [PATCH] chore(Tailwind): RenderedQueryString to tailwind (#7627)

---
 .../ui/components/rendered-query-string.tsx   | 26 +++----------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/packages/insomnia/src/ui/components/rendered-query-string.tsx b/packages/insomnia/src/ui/components/rendered-query-string.tsx
index 3833bd3e3..97aebfe5a 100644
--- a/packages/insomnia/src/ui/components/rendered-query-string.tsx
+++ b/packages/insomnia/src/ui/components/rendered-query-string.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React, { FC, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { database as db } from '../../common/database';
 import * as models from '../../models';
@@ -11,25 +10,7 @@ import { getAuthObjectOrNull, isAuthEnabled } from '../../network/authentication
 import { getOrInheritAuthentication } from '../../network/network';
 import { buildQueryStringFromParams, joinUrlAndQueryString, smartEncodeUrl } from '../../utils/url/querystring';
 import { useNunjucks } from '../context/nunjucks/use-nunjucks';
-import { CopyButton as _CopyButton } from './base/copy-button';
-
-const Wrapper = styled.div({
-  display: 'flex',
-  justifyContent: 'space-between',
-  overflow: 'auto',
-  position: 'relative',
-  height: '100%',
-  gap: 'var(--padding-sm)',
-  width: '100%',
-});
-
-const CopyButton = styled(_CopyButton)({
-  '&&': {
-    alignSelf: 'start',
-    position: 'sticky',
-    top: 0,
-  },
-});
+import { CopyButton } from './base/copy-button';
 
 interface Props {
   request: Request | WebSocketRequest;
@@ -118,7 +99,7 @@ export const RenderedQueryString: FC<Props> = ({ request }) => {
   const className = previewString === defaultPreview ? 'super-duper-faint' : 'selectable force-wrap';
 
   return (
-    <Wrapper>
+    <div className="flex justify-between overflow-auto relative h-full gap-[var(--padding-sm)] w-full">
       <span className={classNames('my-auto', className)}>{previewString}</span>
 
       <CopyButton
@@ -127,9 +108,10 @@ export const RenderedQueryString: FC<Props> = ({ request }) => {
         disabled={previewString === defaultPreview}
         title="Copy URL"
         confirmMessage=""
+        className='self-start sticky top-0'
       >
         <i className="fa fa-copy" />
       </CopyButton>
-    </Wrapper>
+    </div>
   );
 };