fix(requests): remove unnecessary margin between avatar and username

server/api/externalapi.ts

@@ -37,6 +37,8 @@ class ExternalAPI {
         ...options.headers,
       },
     });
+    this.axios.interceptors.request = axios.interceptors.request;
+    this.axios.interceptors.response = axios.interceptors.response;
 
     if (options.rateLimit) {
       this.axios = rateLimit(this.axios, {

server/api/tautulli.ts

@@ -123,6 +123,8 @@ class TautulliAPI {
       }${settings.urlBase ?? ''}`,
       params: { apikey: settings.apiKey },
     });
+    this.axios.interceptors.request = axios.interceptors.request;
+    this.axios.interceptors.response = axios.interceptors.response;
   }
 
   public async getInfo(): Promise<TautulliInfo> {

server/lib/imageproxy.ts

@@ -150,6 +150,8 @@ class ImageProxy {
       baseURL: baseUrl,
       headers: options.headers,
     });
+    this.axios.interceptors.request = axios.interceptors.request;
+    this.axios.interceptors.response = axios.interceptors.response;
 
     if (options.rateLimitOptions) {
       this.axios = rateLimit(this.axios, options.rateLimitOptions);

server/utils/customProxyAgent.ts

@@ -56,12 +56,9 @@ export default async function createCustomProxyAgent(
       : undefined;
 
   try {
-    const proxyUrl =
-      (proxySettings.useSsl ? 'https://' : 'http://') +
-      proxySettings.hostname +
-      ':' +
-      proxySettings.port;
-
+    const proxyUrl = `${proxySettings.useSsl ? 'https' : 'http'}://${
+      proxySettings.hostname
+    }:${proxySettings.port}`;
     const proxyAgent = new ProxyAgent({
       uri: proxyUrl,
       token,
@@ -70,10 +67,17 @@ export default async function createCustomProxyAgent(
 
     setGlobalDispatcher(proxyAgent.compose(noProxyInterceptor));
 
-    axios.defaults.httpAgent = new HttpProxyAgent(proxyUrl);
-    axios.defaults.httpsAgent = new HttpsProxyAgent(proxyUrl);
+    axios.defaults.httpAgent = new HttpProxyAgent(proxyUrl, {
+      headers: token ? { 'proxy-authorization': token } : undefined,
+    });
+    axios.defaults.httpsAgent = new HttpsProxyAgent(proxyUrl, {
+      headers: token ? { 'proxy-authorization': token } : undefined,
+    });
     axios.interceptors.request.use((config) => {
-      if (config.url && skipUrl(config.url)) {
+      const url = config.baseURL
+        ? new URL(config.baseURL + (config.url || ''))
+        : config.url;
+      if (url && skipUrl(url)) {
         config.httpAgent = false;
         config.httpsAgent = false;
       }

src/components/RequestBlock/index.tsx

@@ -1,5 +1,6 @@
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import Tooltip from '@app/components/Common/Tooltip';
 import RequestModal from '@app/components/RequestModal';
 import useRequestOverride from '@app/hooks/useRequestOverride';
@@ -95,36 +96,58 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
         <div className="flex items-center justify-between">
           <div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
             <div className="white mb-1 flex flex-nowrap">
-              <Tooltip content={intl.formatMessage(messages.requestedby)}>
-                <UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
-              </Tooltip>
-              <span className="w-40 truncate md:w-auto">
+              <span className="flex w-40 items-center truncate md:w-auto">
+                <Tooltip content={intl.formatMessage(messages.requestedby)}>
+                  <UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
+                </Tooltip>
                 <Link
                   href={
                     request.requestedBy.id === user?.id
                       ? '/profile'
                       : `/users/${request.requestedBy.id}`
                   }
-                  className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
+                  className="flex items-center font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
                 >
+                  <span className="avatar-sm">
+                    <CachedImage
+                      type="avatar"
+                      src={request.requestedBy.avatar}
+                      alt=""
+                      className="avatar-sm object-cover"
+                      width={20}
+                      height={20}
+                    />
+                  </span>
                   {request.requestedBy.displayName}
                 </Link>
               </span>
             </div>
             {request.modifiedBy && (
               <div className="flex flex-nowrap">
-                <Tooltip content={intl.formatMessage(messages.lastmodifiedby)}>
-                  <EyeIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
-                </Tooltip>
-                <span className="w-40 truncate md:w-auto">
+                <span className="flex w-40 items-center truncate md:w-auto">
+                  <Tooltip
+                    content={intl.formatMessage(messages.lastmodifiedby)}
+                  >
+                    <EyeIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
+                  </Tooltip>
                   <Link
                     href={
                       request.modifiedBy.id === user?.id
                         ? '/profile'
                         : `/users/${request.modifiedBy.id}`
                     }
-                    className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
+                    className="flex items-center font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
                   >
+                    <span className="avatar-sm">
+                      <CachedImage
+                        type="avatar"
+                        src={request.modifiedBy.avatar}
+                        alt=""
+                        className="avatar-sm object-cover"
+                        width={20}
+                        height={20}
+                      />
+                    </span>
                     {request.modifiedBy.displayName}
                   </Link>
                 </span>