fix: issues and login page still had incorrect animations (#2979)

Issues dropdown and the login page transition including the language picker were set as fragments

src/components/IssueDetails/IssueComment/index.tsx

@@ -65,7 +65,7 @@ const IssueComment = ({
       } mt-4 space-x-4`}
     >
       <Transition
-        as={Fragment}
+        as="div"
         enter="transition opacity-0 duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/IssueDetails/IssueDescription/index.tsx

@@ -4,7 +4,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import { Menu, Transition } from '@headlessui/react';
 import { DotsVerticalIcon } from '@heroicons/react/solid';
 import { Field, Form, Formik } from 'formik';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import ReactMarkdown from 'react-markdown';
 
@@ -52,7 +52,7 @@ const IssueDescription = ({
 
                 <Transition
                   show={open}
-                  as={Fragment}
+                  as="div"
                   enter="transition ease-out duration-100"
                   enterFrom="transform opacity-0 scale-95"
                   enterTo="transform opacity-100 scale-100"

src/components/IssueDetails/index.tsx

@@ -28,7 +28,7 @@ import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
@@ -174,7 +174,7 @@ const IssueDetails = () => {
     >
       <PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
       <Transition
-        as={Fragment}
+        as="div"
         enter="transition opacity-0 duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Layout/LanguagePicker/index.tsx

@@ -4,7 +4,7 @@ import useClickOutside from '@app/hooks/useClickOutside';
 import useLocale from '@app/hooks/useLocale';
 import { Transition } from '@headlessui/react';
 import { TranslateIcon } from '@heroicons/react/solid';
-import { Fragment, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -32,7 +32,7 @@ const LanguagePicker = () => {
         </button>
       </div>
       <Transition
-        as={Fragment}
+        as="div"
         show={isDropdownOpen}
         enter="transition ease-out duration-100 opacity-0"
         enterFrom="transform opacity-0 scale-95"

src/components/Login/index.tsx

@@ -10,7 +10,7 @@ import { Transition } from '@headlessui/react';
 import { XCircleIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
-import { Fragment, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 
@@ -93,7 +93,7 @@ const Login = () => {
         >
           <>
             <Transition
-              as={Fragment}
+              as="div"
               show={!!error}
               enter="opacity-0 transition duration-300"
               enterFrom="opacity-0"