Fixed some small UI problems

Perpheads · Jan 27, 2023 · bfd5199 · bfd5199
1 parent d7719ac
commit bfd5199
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/client/src/main/kotlin/components/AccountPageComponent.kt b/client/src/main/kotlin/components/AccountPageComponent.kt
@@ -73,6 +73,7 @@ val AccountPageComponent = fc<AccountPageProps>("AccountPageComponent") {
     val username = account?.username
 
     val theme = useTheme<Theme>()
+    val tinyScreen = useMediaQuery(theme.breakpoints.only(Breakpoint.xs))
     val smallScreen = useMediaQuery(theme.breakpoints.down(Breakpoint.md))
     val shouldShowDetails = useMediaQuery(theme.breakpoints.up(Breakpoint.sm))
 
@@ -219,11 +220,12 @@ val AccountPageComponent = fc<AccountPageProps>("AccountPageComponent") {
 
         Pagination {
             attrs {
-                count = paginationData.pageEnd
+                size = if (smallScreen) Size.small else Size.medium
+                count = paginationData.totalPages
                 defaultPage = paginationData.currentPage
+                showFirstButton = !tinyScreen
+                showLastButton = !tinyScreen
                 this.page = paginationData.currentPage
-                showFirstButton = true
-                showLastButton = true
                 onChange = { _, num ->
                     changeUrl(num.toInt(), search)
                 }

diff --git a/client/src/main/kotlin/components/ApiKeyComponent.kt b/client/src/main/kotlin/components/ApiKeyComponent.kt
@@ -79,7 +79,13 @@ val ApiKeyComponent = fc<ApiKeyProps>("ApiKeyComponent") { props ->
                     this.readOnly = true
                 }.asDynamic() as? InputBaseComponentProps
                 label = ReactNode("API Key")
+                onClick = {
+                    it.stopPropagation()
+                    it.preventDefault()
+                }
                 onFocus = {
+                    it.stopPropagation()
+                    it.preventDefault()
                     window.navigator.clipboard.writeText(apiKey)
                     props.showAlert("API Key copied successfully", AlertColor.info)
                 }

diff --git a/client/src/main/kotlin/components/FileComponent.kt b/client/src/main/kotlin/components/FileComponent.kt
@@ -3,13 +3,11 @@ package com.perpheads.files.components
 import com.perpheads.files.ApiClient
 import com.perpheads.files.data.FileResponse
 import com.perpheads.files.data.validateFilename
-import csstype.AlignItems
-import csstype.Display
-import csstype.FlexDirection
-import csstype.px
+import csstype.*
 import mui.icons.material.DeleteOutline
 import mui.icons.material.Edit
 import mui.material.*
+import mui.material.Size
 import mui.system.sx
 import react.*
 import web.html.HTMLInputElement
@@ -90,6 +88,9 @@ val FileComponent = fc<FileComponentProps>("FileComponent") { props ->
                         attrs.href = ApiClient.getLocalLink("/${props.file.link}")
                         attrs.target = WindowTarget._blank
                         attrs.underline = LinkUnderline.none
+                        attrs.sx {
+                            overflowWrap = OverflowWrap.anywhere
+                        }
                         +props.file.fileName
                     }
                 }

diff --git a/client/src/main/kotlin/components/PageComponent.kt b/client/src/main/kotlin/components/PageComponent.kt
@@ -179,9 +179,6 @@ val Page = fc<PageProps> { props ->
                     Box {
                         attrs.sx {
                             flexGrow = number(1.0)
-                            theme.breakpoints.only(Breakpoint.xs).invoke {
-                                display = "none".asDynamic() as? Display
-                            }
                             theme.breakpoints.only(Breakpoint.sm).invoke {
                                 display = Display.flex
                             }