feat: responsive header, navigation and headings and avatars (#2959)

* feat: add margins around navigation icons

* feat: responsive headings in hader

* chore: change class placements

---------

Co-authored-by: René Aaron <rene@twentyuno.net>

src/app/components/AccountDetailLayout/index.tsx

@@ -49,7 +49,9 @@ function AccountDetailLayout() {
               {account.name}
             </h2>
             <span>/</span>
-            <span>{t("title1")}</span>
+            <span className="text-ellipsis whitespace-nowrap overflow-hidden">
+              {t("title1")}
+            </span>
           </div>
         )}
       </Header>

src/app/components/Avatar/index.tsx

@@ -22,7 +22,7 @@ const Avatar = (props: Props) => {
 const AvatarImage = (props: Props) => {
   return (
     <div
-      className={classNames("translate-z-0", props.className ?? "")}
+      className={classNames("translate-z-0 shrink-0", props.className ?? "")}
       style={{
         width: `${props.size}px`,
         height: `${props.size}px`,
@@ -52,7 +52,7 @@ const AvatarSVG = (props: Omit<Props, "url">) => {
   return (
     <svg
       className={classNames(
-        "rounded-full overflow-hidden translate-z-0",
+        "rounded-full overflow-hidden translate-z-0 shrink-0",
         props.className ?? ""
       )}
       ref={svgRef}

src/app/components/Header/index.tsx

@@ -8,9 +8,11 @@ function Header({ children, headerLeft, headerRight }: Props) {
   return (
     <div className="bg-white py-[6px] border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
       <div className="flex justify-between items-center container max-w-screen-lg px-4 mx-auto">
-        <div className="w-8 h-8">{headerLeft}</div>
-        <h1 className="text-lg font-medium dark:text-white">{children}</h1>
-        <div className="w-8 h-8">{headerRight}</div>
+        <div className="w-8 h-8 mr-3">{headerLeft}</div>
+        <h1 className="text-lg font-medium dark:text-white overflow-hidden">
+          {children}
+        </h1>
+        <div className="w-8 h-8 ml-3">{headerRight}</div>
       </div>
     </div>
   );