fix dropdown text wrapping in other languages

This commit is contained in:
daniel31x13 2024-08-14 19:13:19 -04:00
parent 5b430cf31e
commit 193a70c6e8
13 changed files with 101 additions and 40 deletions

View File

@ -80,7 +80,7 @@ export default function CollectionCard({ collection, className }: Props) {
>
<i className="bi-three-dots text-xl" title="More"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
{permissions === true && (
<li>
<div
@ -90,6 +90,7 @@ export default function CollectionCard({ collection, className }: Props) {
(document?.activeElement as HTMLElement)?.blur();
setEditCollectionModal(true);
}}
className="whitespace-nowrap"
>
{t("edit_collection_info")}
</div>
@ -103,6 +104,7 @@ export default function CollectionCard({ collection, className }: Props) {
(document?.activeElement as HTMLElement)?.blur();
setEditCollectionSharingModal(true);
}}
className="whitespace-nowrap"
>
{permissions === true
? t("share_and_collaborate")
@ -117,6 +119,7 @@ export default function CollectionCard({ collection, className }: Props) {
(document?.activeElement as HTMLElement)?.blur();
setDeleteCollectionModal(true);
}}
className="whitespace-nowrap"
>
{permissions === true
? t("delete_collection")

View File

@ -29,7 +29,7 @@ export default function FilterSearchDropdown({
>
<i className="bi-funnel text-neutral text-2xl"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-56 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<label
className="label cursor-pointer flex justify-start"
@ -45,7 +45,7 @@ export default function FilterSearchDropdown({
setSearchFilter({ ...searchFilter, name: !searchFilter.name })
}
/>
<span className="label-text">{t("name")}</span>
<span className="label-text whitespace-nowrap">{t("name")}</span>
</label>
</li>
<li>
@ -63,7 +63,7 @@ export default function FilterSearchDropdown({
setSearchFilter({ ...searchFilter, url: !searchFilter.url })
}
/>
<span className="label-text">{t("link")}</span>
<span className="label-text whitespace-nowrap">{t("link")}</span>
</label>
</li>
<li>
@ -84,7 +84,9 @@ export default function FilterSearchDropdown({
})
}
/>
<span className="label-text">{t("description")}</span>
<span className="label-text whitespace-nowrap">
{t("description")}
</span>
</label>
</li>
<li>
@ -102,7 +104,7 @@ export default function FilterSearchDropdown({
setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
}
/>
<span className="label-text">{t("tags")}</span>
<span className="label-text whitespace-nowrap">{t("tags")}</span>
</label>
</li>
<li>
@ -123,8 +125,10 @@ export default function FilterSearchDropdown({
})
}
/>
<span className="label-text">{t("full_content")}</span>
<div className="ml-auto badge badge-sm badge-neutral">
<span className="label-text whitespace-nowrap">
{t("full_content")}
</span>
<div className="ml-auto badge badge-sm badge-neutral whitespace-nowrap">
{t("slower")}
</div>
</label>

View File

@ -86,7 +86,7 @@ export default function LinkActions({
<i title="More" className="bi-three-dots text-xl" />
</div>
<ul
className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 ${
className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
alignToTop ? "" : "translate-y-10"
}`}
>
@ -98,6 +98,7 @@ export default function LinkActions({
(document?.activeElement as HTMLElement)?.blur();
pinLink();
}}
className="whitespace-nowrap"
>
{link?.pinnedBy && link.pinnedBy[0]
? t("unpin")
@ -113,6 +114,7 @@ export default function LinkActions({
(document?.activeElement as HTMLElement)?.blur();
toggleShowInfo();
}}
className="whitespace-nowrap"
>
{!linkInfo ? t("show_link_details") : t("hide_link_details")}
</div>
@ -127,6 +129,7 @@ export default function LinkActions({
(document?.activeElement as HTMLElement)?.blur();
setEditLinkModal(true);
}}
className="whitespace-nowrap"
>
{t("edit_link")}
</div>
@ -141,6 +144,7 @@ export default function LinkActions({
(document?.activeElement as HTMLElement)?.blur();
setPreservedFormatsModal(true);
}}
className="whitespace-nowrap"
>
{t("preserved_formats")}
</div>
@ -171,6 +175,7 @@ export default function LinkActions({
}
: setDeleteLinkModal(true);
}}
className="whitespace-nowrap"
>
{t("delete")}
</div>

View File

@ -41,7 +41,7 @@ export default function MobileNavigation({}: Props) {
<i className="bi-plus text-5xl pointer-events-none"></i>
</span>
</div>
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1 -ml-12">
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mb-1 -ml-12">
<li>
<div
onClick={() => {
@ -50,6 +50,7 @@ export default function MobileNavigation({}: Props) {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("new_link")}
</div>
@ -62,6 +63,7 @@ export default function MobileNavigation({}: Props) {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("upload_file")}
</div>
@ -74,6 +76,7 @@ export default function MobileNavigation({}: Props) {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("new_collection")}
</div>

View File

@ -277,7 +277,7 @@ export default function EditCollectionSharingModal({
{roleLabel}
<i className="bi-chevron-down"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-64 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
<li>
<label
className="label cursor-pointer flex justify-start"
@ -316,10 +316,12 @@ export default function EditCollectionSharingModal({
}}
/>
<div>
<p className="font-bold">
<p className="font-bold whitespace-nowrap">
{t("viewer")}
</p>
<p>{t("viewer_desc")}</p>
<p className="whitespace-nowrap">
{t("viewer_desc")}
</p>
</div>
</label>
</li>
@ -361,10 +363,12 @@ export default function EditCollectionSharingModal({
}}
/>
<div>
<p className="font-bold">
<p className="font-bold whitespace-nowrap">
{t("contributor")}
</p>
<p>{t("contributor_desc")}</p>
<p className="whitespace-nowrap">
{t("contributor_desc")}
</p>
</div>
</label>
</li>
@ -406,10 +410,12 @@ export default function EditCollectionSharingModal({
}}
/>
<div>
<p className="font-bold">
<p className="font-bold whitespace-nowrap">
{t("admin")}
</p>
<p>{t("admin_desc")}</p>
<p className="whitespace-nowrap">
{t("admin_desc")}
</p>
</div>
</label>
</li>

View File

@ -115,7 +115,7 @@ export default function NewTokenModal({ onClose }: Props) {
>
{getLabel(token.expires)}
</Button>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
<li>
<label
className="label cursor-pointer flex justify-start"
@ -135,7 +135,9 @@ export default function NewTokenModal({ onClose }: Props) {
});
}}
/>
<span className="label-text">{t("7_days")}</span>
<span className="label-text whitespace-nowrap">
{t("7_days")}
</span>
</label>
</li>
<li>
@ -154,7 +156,9 @@ export default function NewTokenModal({ onClose }: Props) {
setToken({ ...token, expires: TokenExpiry.oneMonth });
}}
/>
<span className="label-text">{t("30_days")}</span>
<span className="label-text whitespace-nowrap">
{t("30_days")}
</span>
</label>
</li>
<li>
@ -176,7 +180,9 @@ export default function NewTokenModal({ onClose }: Props) {
});
}}
/>
<span className="label-text">{t("60_days")}</span>
<span className="label-text whitespace-nowrap">
{t("60_days")}
</span>
</label>
</li>
<li>
@ -198,7 +204,9 @@ export default function NewTokenModal({ onClose }: Props) {
});
}}
/>
<span className="label-text">{t("90_days")}</span>
<span className="label-text whitespace-nowrap">
{t("90_days")}
</span>
</label>
</li>
<li>
@ -217,7 +225,9 @@ export default function NewTokenModal({ onClose }: Props) {
setToken({ ...token, expires: TokenExpiry.never });
}}
/>
<span className="label-text">{t("no_expiration")}</span>
<span className="label-text whitespace-nowrap">
{t("no_expiration")}
</span>
</label>
</li>
</ul>

View File

@ -66,7 +66,7 @@ export default function Navbar() {
</span>
</div>
</div>
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<div
onClick={() => {
@ -75,6 +75,7 @@ export default function Navbar() {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("new_link")}
</div>
@ -87,6 +88,7 @@ export default function Navbar() {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("upload_file")}
</div>
@ -99,6 +101,7 @@ export default function Navbar() {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("new_collection")}
</div>

View File

@ -32,9 +32,7 @@ export default function ProfileDropdown() {
/>
</div>
<ul
className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box ${
isAdmin ? "w-48" : "w-40"
} mt-1`}
className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1`}
>
<li>
<Link
@ -42,6 +40,7 @@ export default function ProfileDropdown() {
onClick={() => (document?.activeElement as HTMLElement)?.blur()}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("settings")}
</Link>
@ -54,6 +53,7 @@ export default function ProfileDropdown() {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("switch_to", {
theme: settings.theme === "light" ? t("dark") : t("light"),
@ -67,6 +67,7 @@ export default function ProfileDropdown() {
onClick={() => (document?.activeElement as HTMLElement)?.blur()}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("server_administration")}
</Link>
@ -80,6 +81,7 @@ export default function ProfileDropdown() {
}}
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("logout")}
</div>

View File

@ -27,7 +27,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
>
<i className="bi-chevron-expand text-neutral text-2xl"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
<li>
<label
className="label cursor-pointer flex justify-start"
@ -41,7 +41,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
checked={sortBy === Sort.DateNewestFirst}
onChange={() => setSort(Sort.DateNewestFirst)}
/>
<span className="label-text">{t("date_newest_first")}</span>
<span className="label-text whitespace-nowrap">
{t("date_newest_first")}
</span>
</label>
</li>
<li>
@ -57,7 +59,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
checked={sortBy === Sort.DateOldestFirst}
onChange={() => setSort(Sort.DateOldestFirst)}
/>
<span className="label-text">{t("date_oldest_first")}</span>
<span className="label-text whitespace-nowrap">
{t("date_oldest_first")}
</span>
</label>
</li>
<li>
@ -73,7 +77,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
checked={sortBy === Sort.NameAZ}
onChange={() => setSort(Sort.NameAZ)}
/>
<span className="label-text">{t("name_az")}</span>
<span className="label-text whitespace-nowrap">{t("name_az")}</span>
</label>
</li>
<li>
@ -89,7 +93,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
checked={sortBy === Sort.NameZA}
onChange={() => setSort(Sort.NameZA)}
/>
<span className="label-text">{t("name_za")}</span>
<span className="label-text whitespace-nowrap">{t("name_za")}</span>
</label>
</li>
<li>
@ -105,7 +109,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
checked={sortBy === Sort.DescriptionAZ}
onChange={() => setSort(Sort.DescriptionAZ)}
/>
<span className="label-text">{t("description_az")}</span>
<span className="label-text whitespace-nowrap">
{t("description_az")}
</span>
</label>
</li>
<li>
@ -121,7 +127,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
checked={sortBy === Sort.DescriptionZA}
onChange={() => setSort(Sort.DescriptionZA)}
/>
<span className="label-text">{t("description_za")}</span>
<span className="label-text whitespace-nowrap">
{t("description_za")}
</span>
</label>
</li>
</ul>

View File

@ -134,7 +134,7 @@ export default function Index() {
>
<i className="bi-three-dots text-xl" title="More"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
{permissions === true && (
<li>
<div
@ -144,6 +144,7 @@ export default function Index() {
(document?.activeElement as HTMLElement)?.blur();
setEditCollectionModal(true);
}}
className="whitespace-nowrap"
>
{t("edit_collection_info")}
</div>
@ -157,6 +158,7 @@ export default function Index() {
(document?.activeElement as HTMLElement)?.blur();
setEditCollectionSharingModal(true);
}}
className="whitespace-nowrap"
>
{permissions === true
? t("share_and_collaborate")
@ -172,6 +174,7 @@ export default function Index() {
(document?.activeElement as HTMLElement)?.blur();
setNewCollectionModal(true);
}}
className="whitespace-nowrap"
>
{t("create_subcollection")}
</div>
@ -185,6 +188,7 @@ export default function Index() {
(document?.activeElement as HTMLElement)?.blur();
setDeleteCollectionModal(true);
}}
className="whitespace-nowrap"
>
{permissions === true
? t("delete_collection")

View File

@ -214,13 +214,14 @@ export default function Dashboard() {
<i className="bi-cloud-upload text-xl duration-100"></i>
<p>{t("import_links")}</p>
</div>
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<label
tabIndex={0}
role="button"
htmlFor="import-linkwarden-file"
title={t("from_linkwarden")}
className="whitespace-nowrap"
>
{t("from_linkwarden")}
<input
@ -241,6 +242,7 @@ export default function Dashboard() {
role="button"
htmlFor="import-html-file"
title={t("from_html")}
className="whitespace-nowrap"
>
{t("from_html")}
<input
@ -261,6 +263,7 @@ export default function Dashboard() {
role="button"
htmlFor="import-wallabag-file"
title={t("from_wallabag")}
className="whitespace-nowrap"
>
{t("from_wallabag")}
<input

View File

@ -242,9 +242,13 @@ export default function Account() {
<i className="bi-pencil-square text-md duration-100"></i>
{t("edit")}
</Button>
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<label tabIndex={0} role="button">
<label
tabIndex={0}
role="button"
className="whitespace-nowrap"
>
{t("upload_new_photo")}
<input
type="file"
@ -267,6 +271,7 @@ export default function Account() {
image: "",
})
}
className="whitespace-nowrap"
>
{t("remove_photo")}
</div>
@ -341,13 +346,14 @@ export default function Account() {
{t("import_links")}
</Button>
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<label
tabIndex={0}
role="button"
htmlFor="import-linkwarden-file"
title={t("from_linkwarden")}
className="whitespace-nowrap"
>
{t("from_linkwarden")}
<input
@ -368,6 +374,7 @@ export default function Account() {
role="button"
htmlFor="import-html-file"
title={t("from_html")}
className="whitespace-nowrap"
>
{t("from_html")}
<input
@ -388,6 +395,7 @@ export default function Account() {
role="button"
htmlFor="import-wallabag-file"
title={t("from_wallabag")}
className="whitespace-nowrap"
>
{t("from_wallabag")}
<input

View File

@ -194,7 +194,7 @@ export default function Index() {
className={"bi-three-dots text-neutral text-2xl"}
></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-36 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<div
role="button"
@ -203,6 +203,7 @@ export default function Index() {
(document?.activeElement as HTMLElement)?.blur();
setRenameTag(true);
}}
className="whitespace-nowrap"
>
{t("rename_tag")}
</div>
@ -215,6 +216,7 @@ export default function Index() {
(document?.activeElement as HTMLElement)?.blur();
remove();
}}
className="whitespace-nowrap"
>
{t("delete_tag")}
</div>