fix ui

packages/app/src/components/dialog-changelog.css

@@ -1,5 +1,7 @@
 .dialog-changelog {
-  min-height: 0;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
 }
 
 .dialog-changelog [data-slot="dialog-body"] {
@@ -7,15 +9,19 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .dialog-changelog-list {
   flex: 1;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .dialog-changelog-list [data-slot="list-scroll"] {
-  height: 100%;
+  flex: 1;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--border-weak-base) transparent;
@@ -44,6 +50,7 @@
 
 .dialog-changelog-header {
   padding: 8px 12px 8px 8px;
+  margin-top: 32px;
   display: flex;
   align-items: baseline;
   gap: 8px;
@@ -70,9 +77,7 @@
   opacity: 1;
 }
 
-.dialog-changelog-divider {
-  border-bottom: 1px solid var(--border-weak-base);
-}
+
 
 .dialog-changelog-version {
   font-size: 20px;

packages/app/src/components/dialog-changelog.tsx

@@ -105,24 +105,26 @@ export function DialogChangelog() {
   }
 
   return (
-    <Dialog title="Changelog" class="dialog-changelog">
-      <Show when={loading()}>
-        <p class="text-text-weak p-6">Loading...</p>
-      </Show>
-      <Show when={error()}>
-        <p class="text-text-weak p-6">{error()}</p>
-      </Show>
-      <Show when={!loading() && !error() && releases().length === 0}>
-        <p class="text-text-weak p-6">No releases found.</p>
-      </Show>
-      <Show when={!loading() && !error() && releases().length > 0}>
-        <ReleaseList
-          releases={releases()}
-          hasMore={hasMore()}
-          loadingMore={loadingMore()}
-          onLoadMore={handleLoadMore}
-        />
-      </Show>
+    <Dialog size="x-large" transition title="Changelog">
+      <div class="flex-1 min-h-0 flex flex-col">
+        <Show when={loading()}>
+          <p class="text-text-weak p-6">Loading...</p>
+        </Show>
+        <Show when={error()}>
+          <p class="text-text-weak p-6">{error()}</p>
+        </Show>
+        <Show when={!loading() && !error() && releases().length === 0}>
+          <p class="text-text-weak p-6">No releases found.</p>
+        </Show>
+        <Show when={!loading() && !error() && releases().length > 0}>
+          <ReleaseList
+            releases={releases()}
+            hasMore={hasMore()}
+            loadingMore={loadingMore()}
+            onLoadMore={handleLoadMore}
+          />
+        </Show>
+      </div>
     </Dialog>
   )
 }

packages/app/src/components/dialog-settings.tsx

@@ -60,14 +60,12 @@ export const DialogSettings: Component = () => {
             <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
               <span>{language.t("app.name.desktop")}</span>
               <span class="text-11-regular">v{platform.version}</span>
-              <Button
-                variant="ghost"
-                size="small"
-                class="text-11-regular text-text-weak hover:text-text-base px-0 py-0 h-auto -ml-1"
+              <button
+                class="text-11-regular text-text-weak hover:text-text-base self-start"
                 onClick={handleShowChangelog}
               >
                 Changelog
-              </Button>
+              </button>
             </div>
           </div>
         </Tabs.List>

packages/app/src/components/release-list.tsx

@@ -54,7 +54,7 @@ export const ReleaseList: Component<ReleaseListProps> = (props) => {
       search={false}
       emptyMessage="No releases found"
       loadingMessage="Loading..."
-      class="dialog-changelog-list"
+      class="dialog-changelog-list flex-1 min-h-0"
       add={{
         render: () =>
           props.hasMore ? (
@@ -69,7 +69,6 @@ export const ReleaseList: Component<ReleaseListProps> = (props) => {
       {(item) => (
         <>
           <StickyHeader tag={item.tag} date={item.date} />
-          <div class="dialog-changelog-divider" />
           <div class="dialog-changelog-content">
             <Markdown text={item.body} class="dialog-changelog-markdown prose prose-sm max-w-none text-text-base" />
           </div>