fix: bookmark mobile view

ndom91 · Aug 21, 2024 · 4d3a982 · 4d3a982
1 parent 988f369
commit 4d3a982
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/apps/web/src/lib/components/bookmark-row/BookmarkRow.svelte b/apps/web/src/lib/components/bookmark-row/BookmarkRow.svelte
@@ -84,8 +84,8 @@
     <span class="truncate pr-10 text-xl font-semibold md:pr-0" title={bookmark.title}>
       {bookmark.title}
     </span>
-    <p class="line-clamp-2 pr-10 md:pr-0">{bookmark.desc}</p>
-    <div class="text-muted flex items-center justify-start gap-2 text-sm">
+    <p class="line-clamp-2 hidden pr-10 sm:[display:-webkit-box] md:pr-0">{bookmark.desc}</p>
+    <div class="text-muted flex items-center justify-start gap-2 pr-10 text-sm md:pr-0">
       <img
         src={`${PUBLIC_WORKER_URL}/img/_/https://favicon.yandex.net/favicon/${new URL(bookmark.url).hostname}`}
         alt="URL Favicon"
@@ -94,12 +94,12 @@
       <a
         target="_blank"
         href={bookmark.url}
-        class="line-clamp-1 text-clip pr-8 text-neutral-500 md:pr-0"
+        class="truncate text-neutral-500"
       >
         {bookmark.url}
       </a>
     </div>
-    <span class="flex flex-wrap gap-2">
+    <span class="flex flex-wrap gap-2 pr-10 md:pr-0">
       <Badge variant="default">
         {format(bookmark.createdAt, { date: "medium", time: "short" })}
       </Badge>

diff --git a/apps/web/src/lib/components/image/Image.svelte b/apps/web/src/lib/components/image/Image.svelte
@@ -42,13 +42,13 @@
   style="grid-template: 'container';"
   class={cn(
     "relative grid flex-shrink-0 place-content-center place-items-center overflow-hidden rounded-md border border-neutral-100 dark:border-neutral-800",
-    "h-36 w-48 md:w-64",
+    "h-24 w-32 sm:h-36 sm:w-48 md:w-64",
     className,
   )}
 >
   <img
     style="grid-area: container;"
-    class="aspect-video h-36 w-full rounded-md object-cover opacity-0 transition duration-500"
+    class="aspect-video h-24 w-full rounded-md object-cover object-left-top opacity-0 transition duration-500 sm:h-36"
     class:srcImageLoaded={loaded}
     use:onload
     alt={alt ?? "Bookmark Image"}