fix: tweak login buttons to ensure labels fit

Author: michaelhthomas

src/components/Login/PlexLoginButton.tsx

@@ -26,7 +26,7 @@ const PlexLoginButton = ({
 
   return (
     <Button
-      className="relative flex-1 border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)] disabled:opacity-50"
+      className="relative flex-grow border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)] disabled:opacity-50"
       onClick={login}
       disabled={loading || isProcessing}
       data-testid="plex-login-button"

src/components/Login/index.tsx

@@ -138,7 +138,7 @@ const Login = () => {
           <Button
             key="jellyseerr"
             data-testid="jellyseerr-login-button"
-            className="flex-1 bg-transparent"
+            className="flex-grow bg-transparent"
             onClick={() => setMediaServerLogin(false)}
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -153,7 +153,7 @@ const Login = () => {
           <Button
             key="mediaserver"
             data-testid="mediaserver-login-button"
-            className="flex-1 bg-transparent"
+            className="flex-grow bg-transparent"
             onClick={() => setMediaServerLogin(true)}
           >
             <MediaServerLogo />
@@ -165,11 +165,11 @@ const Login = () => {
       <Button
         as="a"
         href={`/api/v1/auth/oidc/login/${provider.slug}`}
-        className="flex-1 bg-transparent"
+        className="flex-grow bg-transparent"
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          src={provider.logo}
+          src={provider.logo || '/images/openid.svg'}
           alt={provider.name}
           className="mr-2 max-h-5 w-5"
         />