fix lineheight problems

Nerimity · Dec 22, 2024 · 4256080 · 4256080
1 parent 8a4d4a9
commit 4256080
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 49 deletions.
diff --git a/src/components/floating-profile/FloatingProfile.tsx b/src/components/floating-profile/FloatingProfile.tsx
@@ -337,7 +337,7 @@ const DesktopProfileFlyout = (props: {
                 style={{ color: "white" }}
                 href={RouterEndpoints.PROFILE(props.userId)}
               >
-                <Text style={{ "overflow-wrap": "anywhere" }}>
+                <Text style={{ "overflow-wrap": "anywhere", "line-height": 1 }}>
                   {user()!.username}
                 </Text>
                 <Text color="rgba(255,255,255,0.6)">:{user()!.tag}</Text>

diff --git a/src/components/home-drawer/friend-item/HomeDrawerFriendItem.tsx b/src/components/home-drawer/friend-item/HomeDrawerFriendItem.tsx
@@ -89,7 +89,7 @@ export default function HomeDrawerFriendItem(props: {
       opacity: ${(props) => (props.selected ? 1 : 0.6)};
       transition: 0.2s;
       font-size: 14px;
-      height: 17px;
+      line-height: 1;
     }
 
     &:hover .username {

diff --git a/src/components/markup/QuoteMessage.tsx b/src/components/markup/QuoteMessage.tsx
@@ -86,7 +86,11 @@ export function QuoteMessage(props: {
         <CustomLink
           decoration
           href={RouterEndpoints.PROFILE(props.quote.createdBy!.id)}
-          style={{ "font-size": "16px", color: serverMember()?.roleColor() }}
+          style={{
+            "font-size": "16px",
+            color: serverMember()?.roleColor(),
+            "line-height": "1",
+          }}
         >
           {serverMember()?.nickname || props.quote.createdBy!.username}
         </CustomLink>

diff --git a/src/components/message-pane/message-item/styles.module.scss b/src/components/message-pane/message-item/styles.module.scss
@@ -9,7 +9,7 @@
 
 .username {
   overflow: hidden;
-  height: 20px;
+  line-height: 1;
   text-overflow: ellipsis;
 }
 
@@ -150,6 +150,7 @@
         overflow: hidden;
         flex-shrink: 0;
         max-width: 200px;
+        line-height: 1;
         opacity: 0.6;
         text-overflow: ellipsis;
         white-space: nowrap;

diff --git a/src/components/post-area/PostItem.module.scss b/src/components/post-area/PostItem.module.scss
@@ -55,7 +55,7 @@
   gap: 6px;
   .postUsernameStyle {
     overflow: hidden;
-    height: 20px;
+    line-height: 1;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

diff --git a/src/components/post-area/PostItem.tsx b/src/components/post-area/PostItem.tsx
@@ -544,7 +544,7 @@ const ReplyTo = (props: { user: RawUser }) => {
       </Text>
       <CustomLink
         decoration
-        style={{ "font-size": "14px" }}
+        style={{ "font-size": "14px", "line-height": "1" }}
         href={RouterEndpoints.PROFILE(props.user?.id!)}
       >
         {props.user?.username}
@@ -575,7 +575,11 @@ const Reposted = (props: { post: Post }) => {
           {(user, i) => (
             <>
               {i() ? ", " : null}
-              <CustomLink decoration href={RouterEndpoints.PROFILE(user?.id!)}>
+              <CustomLink
+                style={{ "line-height": "1" }}
+                decoration
+                href={RouterEndpoints.PROFILE(user?.id!)}
+              >
                 {user?.username}
               </CustomLink>
             </>

diff --git a/src/components/profile-pane/styles.module.scss b/src/components/profile-pane/styles.module.scss
@@ -70,7 +70,9 @@
 .details {
   margin-top: 6px;
 }
-
+.username {
+  line-height: 1;
+}
 .usernameTag {
   display: -webkit-box;
   overflow: hidden;

diff --git a/src/components/right-drawer/styles.module.scss b/src/components/right-drawer/styles.module.scss
@@ -205,7 +205,7 @@
   }
   .username {
     overflow: hidden;
-    height: 20px;
+    line-height: 1;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

diff --git a/src/components/settings/SettingsHeader.tsx b/src/components/settings/SettingsHeader.tsx
@@ -1,4 +1,3 @@
-
 import { A } from "solid-navigator";
 import { Show, createEffect, createSignal, on } from "solid-js";
 import useStore from "@/chat-api/store/useStore";
@@ -17,7 +16,6 @@ import { useResizeObserver } from "@/common/useResizeObserver";
 import { settingsHeaderPreview } from "./SettingsPane";
 import { t } from "i18next";
 
-
 const HeaderContainer = styled("div")`
   position: relative;
   display: flex;
@@ -35,7 +33,7 @@ const DetailsContainer = styled(FlexColumn)`
   margin-right: 20px;
   font-size: 18px;
   z-index: 1111;
-  background: rgba(0,0,0,0.86);
+  background: rgba(0, 0, 0, 0.86);
   backdrop-filter: blur(34px);
   padding: 10px;
   border-radius: 8px;
@@ -46,87 +44,132 @@ const UsernameTagContainer = styled(FlexRow)`
   margin-bottom: 5px;
   overflow-wrap: anywhere;
   overflow: hidden;
+  line-height: 1;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
-          line-clamp: 2; 
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 `;
 
 const avatarStyles = css`
   z-index: 111;
 `;
 
-const CustomAvatar = styled("div")<{cropPosition: string}>`
+const CustomAvatar = styled("div")<{ cropPosition: string }>`
   width: 100%;
   height: 100%;
   background-repeat: no-repeat !important;
   border-radius: 50%;
-  ${props => props.cropPosition}
+  ${(props) => props.cropPosition}
 `;
 
-const SettingsHeader = (props: {bot?: RawUser}) => {
+const SettingsHeader = (props: { bot?: RawUser }) => {
   const [avatarEl, setAvatarEl] = createSignal<HTMLDivElement | undefined>();
   const { account, servers, friends } = useStore();
   const user = () => account.user();
   const serverCount = () => servers.array().length || "0";
-  const friendCount = () => friends.array().filter(friend => friend.status === FriendStatus.FRIENDS).length || "0";
-  const {width} = useWindowProperties();
-
-  const [imageDimensions, setImageDimensions] = createSignal({height: 0, width: 0});
-
-
-  createEffect(on(() => settingsHeaderPreview.avatar, (val) => {
-    if (!val) return;
-    getImageDimensions(val).then(setImageDimensions);
-  }));
+  const friendCount = () =>
+    friends.array().filter((friend) => friend.status === FriendStatus.FRIENDS)
+      .length || "0";
+  const { width } = useWindowProperties();
+
+  const [imageDimensions, setImageDimensions] = createSignal({
+    height: 0,
+    width: 0,
+  });
+
+  createEffect(
+    on(
+      () => settingsHeaderPreview.avatar,
+      (val) => {
+        if (!val) return;
+        getImageDimensions(val).then(setImageDimensions);
+      }
+    )
+  );
 
-  const avatarSize = () => width() <= 500 ? 70 : 100;
+  const avatarSize = () => (width() <= 500 ? 70 : 100);
 
   const cropPosition = () => {
-    const coordinates  = settingsHeaderPreview.avatarPoints;
-    if (!coordinates ) return "";
+    const coordinates = settingsHeaderPreview.avatarPoints;
+    if (!coordinates) return "";
 
-    const viewWidth = avatarSize() && avatarEl()?.clientWidth || 0;
-    const viewHeight = avatarSize() && avatarEl()?.clientHeight || 0;
+    const viewWidth = (avatarSize() && avatarEl()?.clientWidth) || 0;
+    const viewHeight = (avatarSize() && avatarEl()?.clientHeight) || 0;
     const imageWidth = imageDimensions().width;
     const imageHeight = imageDimensions().height;
 
-    const offsetX = coordinates [0];
-    const offsetY = coordinates [1];
-    const scaleX = viewWidth / (coordinates [2] - coordinates [0]);
-    const scaleY = viewHeight / (coordinates [3] - coordinates [1]);
+    const offsetX = coordinates[0];
+    const offsetY = coordinates[1];
+    const scaleX = viewWidth / (coordinates[2] - coordinates[0]);
+    const scaleY = viewHeight / (coordinates[3] - coordinates[1]);
     return `
-      background-position: -${offsetX * scaleX}px -${offsetY * scaleY}px !important;
-      background-size: ${imageWidth * scaleX}px ${imageHeight * scaleY}px !important;
+      background-position: -${offsetX * scaleX}px -${
+      offsetY * scaleY
+    }px !important;
+      background-size: ${imageWidth * scaleX}px ${
+      imageHeight * scaleY
+    }px !important;
     `;
   };
 
   async function getImageDimensions(imageUrl: string) {
     const img = new Image();
     img.src = imageUrl;
     await img.decode();
-    return {width: img.width, height: img.height};
+    return { width: img.width, height: img.height };
   }
 
   return (
     <Show when={user()}>
-      <Banner maxHeight={250} margin={props.bot ? 0 : undefined} animate hexColor={props.bot?.hexColor || user()?.hexColor} url={settingsHeaderPreview.banner || bannerUrl(props.bot || user()!)}>
+      <Banner
+        maxHeight={250}
+        margin={props.bot ? 0 : undefined}
+        animate
+        hexColor={props.bot?.hexColor || user()?.hexColor}
+        url={settingsHeaderPreview.banner || bannerUrl(props.bot || user()!)}
+      >
         <HeaderContainer>
-          <Avatar animate user={props.bot || account.user()!} size={avatarSize()} class={avatarStyles}>
-            {settingsHeaderPreview.avatar  ? <CustomAvatar ref={setAvatarEl} cropPosition={cropPosition()} style={{background: `url("${settingsHeaderPreview.avatar}")`}} /> : null}
+          <Avatar
+            animate
+            user={props.bot || account.user()!}
+            size={avatarSize()}
+            class={avatarStyles}
+          >
+            {settingsHeaderPreview.avatar ? (
+              <CustomAvatar
+                ref={setAvatarEl}
+                cropPosition={cropPosition()}
+                style={{ background: `url("${settingsHeaderPreview.avatar}")` }}
+              />
+            ) : null}
           </Avatar>
           <DetailsContainer>
             <UsernameTagContainer>
-              <Text>{settingsHeaderPreview.username || props.bot?.username || user()!.username}</Text>
-              <Text opacity={0.7}>:{settingsHeaderPreview.tag || props.bot?.tag || user()!.tag}</Text>
+              <Text>
+                {settingsHeaderPreview.username ||
+                  props.bot?.username ||
+                  user()!.username}
+              </Text>
+              <Text opacity={0.7}>
+                :{settingsHeaderPreview.tag || props.bot?.tag || user()!.tag}
+              </Text>
             </UsernameTagContainer>
             <Show when={!props.bot}>
               <FlexRow gap={5}>
-                <Text size={14} opacity={0.8}>{serverCount()} {t("settings.header.servers")}</Text>
+                <Text size={14} opacity={0.8}>
+                  {serverCount()} {t("settings.header.servers")}
+                </Text>
                 <Text size={14}>•</Text>
-                <Text size={14} opacity={0.8}>{friendCount()} {t("settings.header.friends")}</Text>
+                <Text size={14} opacity={0.8}>
+                  {friendCount()} {t("settings.header.friends")}
+                </Text>
               </FlexRow>
-              <Text size={14}><A href="/app/settings/account">{t("settings.header.manageAccount")}</A></Text>
+              <Text size={14}>
+                <A href="/app/settings/account">
+                  {t("settings.header.manageAccount")}
+                </A>
+              </Text>
             </Show>
           </DetailsContainer>
         </HeaderContainer>
@@ -135,5 +178,4 @@ const SettingsHeader = (props: {bot?: RawUser}) => {
   );
 };
 
-
-export default SettingsHeader;
+export default SettingsHeader;
diff --git a/src/components/side-pane/SidePane.tsx b/src/components/side-pane/SidePane.tsx
@@ -269,7 +269,7 @@ const UserItem = () => {
           <div>
             Profile{" "}
             <Show when={user()}>
-              <div>
+              <div style={{ "line-height": "1" }}>
                 {user()!.username}:{user()!.tag}
               </div>
             </Show>
@@ -492,6 +492,7 @@ export function FloatingUserModal(props: {
                   "white-space": "nowrap",
                   overflow: "hidden",
                   "text-overflow": "ellipsis",
+                  "line-height": "1",
                 }}
               >
                 {user().username}