fix(APP-2655): Version info in settings for the App is poorly displayed (#1385)

Author: Barukimang

src/containers/settings/majorityVoting/index.tsx

@@ -112,7 +112,7 @@ const MajorityVotingSettings: React.FC<IPluginSettings> = ({daoDetails}) => {
           <Definition>
             <div className="flex flex-1 flex-wrap items-start justify-between gap-y-2">
               <Link
-                label={`${daoToken.name} ${daoToken.symbol}`}
+                label={`${daoToken.name} (${daoToken.symbol})`}
                 iconRight={IconType.LINK_EXTERNAL}
                 href={daoTokenBlockUrl}
                 description={shortenAddress(daoToken.address)}

src/containers/settings/versionInfoCard/index.tsx

@@ -71,7 +71,7 @@ export const VersionInfoCard: React.FC<{
       <SettingsCard title={t('setting.versionInfo.title')}>
         <DescriptionPair>
           <Term>{t('setting.versionInfo.labelApp')}</Term>
-          <FlexibleDefinition className="truncate">
+          <FlexibleDefinition className="truncate xl:max-w-60">
             <Link
               label={`Aragon App v${AppVersion}`}
               type="primary"
@@ -82,7 +82,7 @@ export const VersionInfoCard: React.FC<{
         </DescriptionPair>
         <DescriptionPair>
           <Term>{t('setting.versionInfo.labelOs')}</Term>
-          <FlexibleDefinition className="truncate">
+          <FlexibleDefinition className="truncate xl:max-w-60">
             <Link
               label={
                 !isLoading ? `Aragon OSx v${versions?.join('.')}` : 'Loading...'
@@ -97,7 +97,7 @@ export const VersionInfoCard: React.FC<{
 
         <DescriptionPair className="border-none">
           <Term>{t('setting.versionInfo.labelGovernance')}</Term>
-          <FlexibleDefinition className="truncate">
+          <FlexibleDefinition className="truncate xl:max-w-60">
             <Link
               label={`${pluginName} v${pluginVersion}`}
               description={shortenAddress(pluginAddress)}