fix: autogrow textarea bugs during animation

fix(mobile): timeline bottom padding on selection (#24480 )
fix(mobile): fix overflow text in backup card (#24448 )
2025-12-10 17:23:12 +03:00 · 2025-12-09 15:50:23 +00:00 · 2025-12-09 09:19:41 -06:00 · 2025-12-09 09:03:29 -06:00 · 2025-12-08 14:29:31 -06:00 · 2025-12-08 15:35:58 +00:00
11 changed files with 169 additions and 122 deletions
--- a/mobile/lib/presentation/pages/drift_create_album.page.dart
+++ b/mobile/lib/presentation/pages/drift_create_album.page.dart
@@ -27,8 +27,19 @@ class _DriftCreateAlbumPageState extends ConsumerState<DriftCreateAlbumPage> {
  bool isAlbumTitleTextFieldFocus = false;
  Set<BaseAsset> selectedAssets = {};

+  @override
+  void initState() {
+    super.initState();
+    albumTitleController.addListener(_onTitleChanged);
+  }
+
+  void _onTitleChanged() {
+    setState(() {});
+  }
+
  @override
  void dispose() {
+    albumTitleController.removeListener(_onTitleChanged);
    albumTitleController.dispose();
    albumDescriptionController.dispose();
    albumTitleTextFieldFocusNode.dispose();
--- a/mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart
@@ -22,7 +22,9 @@ import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_shee
 enum AddToMenuItem { album, archive, unarchive, lockedFolder }

 class AddActionButton extends ConsumerStatefulWidget {
-  const AddActionButton({super.key});
+  const AddActionButton({super.key, this.originalTheme});
+
+  final ThemeData? originalTheme;

  @override
  ConsumerState<AddActionButton> createState() => _AddActionButtonState();
@@ -71,7 +73,7 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
      ),

      if (isOwner) ...[
-        const PopupMenuDivider(),
+        const Divider(),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Text("move_to".tr(), style: context.textTheme.labelMedium),
@@ -166,16 +168,25 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
      return const SizedBox.shrink();
    }

+    final themeData = widget.originalTheme ?? context.themeData;
+
    return MenuAnchor(
      consumeOutsideTap: true,
      style: MenuStyle(
-        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
+        backgroundColor: WidgetStatePropertyAll(themeData.scaffoldBackgroundColor),
        elevation: const WidgetStatePropertyAll(4),
        shape: const WidgetStatePropertyAll(
          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
        ),
      ),
-      menuChildren: _buildMenuChildren(),
+      menuChildren: widget.originalTheme != null
+          ? [
+              Theme(
+                data: widget.originalTheme!,
+                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: _buildMenuChildren()),
+              ),
+            ]
+          : _buildMenuChildren(),
      builder: (context, controller, child) {
        return BaseActionButton(
          iconData: Icons.add,
--- a/mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
@@ -38,11 +38,13 @@ class ViewerBottomBar extends ConsumerWidget {
      opacity = 0;
    }

+    final originalTheme = context.themeData;
+
    final actions = <Widget>[
      const ShareActionButton(source: ActionSource.viewer),
      if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
      if (asset.type == AssetType.image) const EditImageActionButton(),
-      if (asset.hasRemote) const AddActionButton(),
+      if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),

      if (isOwner) ...[
        asset.isLocalOnly
--- a/mobile/lib/presentation/widgets/timeline/timeline.widget.dart
+++ b/mobile/lib/presentation/widgets/timeline/timeline.widget.dart
@@ -324,7 +324,11 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
          final topPadding = context.padding.top + (widget.appBar == null ? 0 : kToolbarHeight) + 10;

          const scrubberBottomPadding = 100.0;
-          final bottomPadding = context.padding.bottom + (widget.appBar == null ? 0 : scrubberBottomPadding);
+          const bottomSheetOpenModifier = 120.0;
+          final bottomPadding =
+              context.padding.bottom +
+              (widget.appBar == null ? 0 : scrubberBottomPadding) +
+              (isMultiSelectEnabled ? bottomSheetOpenModifier : 0);

          final grid = CustomScrollView(
            primary: true,
@@ -347,7 +351,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                  addRepaintBoundaries: false,
                ),
              ),
-              const SliverPadding(padding: EdgeInsets.only(bottom: scrubberBottomPadding)),
+              SliverPadding(padding: EdgeInsets.only(bottom: bottomPadding)),
            ],
          );

--- a/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart
+++ b/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart
@@ -2,26 +2,27 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';

-class EntitiyCountTile extends StatelessWidget {
+class EntityCountTile extends StatelessWidget {
  final int count;
  final String label;
  final IconData icon;

-  const EntitiyCountTile({super.key, required this.count, required this.label, required this.icon});
+  const EntityCountTile({super.key, required this.count, required this.label, required this.icon});

  String zeroPadding(int number, int targetWidth) {
    final numStr = number.toString();
    return numStr.length < targetWidth ? "0" * (targetWidth - numStr.length) : "";
  }

-  int calculateMaxDigits(double availableWidth) {
-    const double charWidth = 11.0;
-    return (availableWidth / charWidth).floor().clamp(1, 8);
-  }
-
  @override
  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    final availableWidth = (screenWidth - 32 - 8) / 2;
+    const double charWidth = 11.0;
+    final maxDigits = ((availableWidth - 32) / charWidth).floor().clamp(1, 8);
+
    return Container(
+      height: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: context.colorScheme.surfaceContainerLow,
@@ -29,7 +30,6 @@ class EntitiyCountTile extends StatelessWidget {
        border: Border.all(width: 0.5, color: context.colorScheme.outline.withAlpha(25)),
      ),
      child: Column(
-        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Icon and Label
@@ -38,33 +38,30 @@ class EntitiyCountTile extends StatelessWidget {
            children: [
              Icon(icon, color: context.primaryColor),
              const SizedBox(width: 8),
-              Text(
-                label,
-                style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              Flexible(
+                child: Text(
+                  label,
+                  style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+                ),
              ),
            ],
          ),
-          const SizedBox(height: 12),
          // Number
-          LayoutBuilder(
-            builder: (context, constraints) {
-              final maxDigits = calculateMaxDigits(constraints.maxWidth);
-              return RichText(
-                text: TextSpan(
-                  style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600),
-                  children: [
-                    TextSpan(
-                      text: zeroPadding(count, maxDigits),
-                      style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
-                    ),
-                    TextSpan(
-                      text: count.toString(),
-                      style: TextStyle(color: context.primaryColor),
-                    ),
-                  ],
+          const Spacer(),
+          RichText(
+            text: TextSpan(
+              style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600),
+              children: [
+                TextSpan(
+                  text: zeroPadding(count, maxDigits),
+                  style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
                ),
-              );
-            },
+                TextSpan(
+                  text: count.toString(),
+                  style: TextStyle(color: context.primaryColor),
+                ),
+              ],
+            ),
          ),
        ],
      ),
--- a/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart
+++ b/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart
@@ -282,76 +282,87 @@ class _SyncStatsCounts extends ConsumerWidget {
            _SectionHeaderText(text: "assets".t(context: context)),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: Flex(
-                direction: Axis.horizontal,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                spacing: 8.0,
-                children: [
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "local".t(context: context),
-                      count: localAssetCount,
-                      icon: Icons.smartphone,
+              // 1. Wrap in IntrinsicHeight
+              child: IntrinsicHeight(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  // 2. Stretch children vertically to fill the IntrinsicHeight
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  spacing: 8.0,
+                  children: [
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "local".t(context: context),
+                        count: localAssetCount,
+                        icon: Icons.smartphone,
+                      ),
                    ),
-                  ),
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "remote".t(context: context),
-                      count: remoteAssetCount,
-                      icon: Icons.cloud,
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "remote".t(context: context),
+                        count: remoteAssetCount,
+                        icon: Icons.cloud,
+                      ),
                    ),
-                  ),
-                ],
+                  ],
+                ),
              ),
            ),
            _SectionHeaderText(text: "albums".t(context: context)),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: Flex(
-                direction: Axis.horizontal,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                spacing: 8.0,
-                children: [
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "local".t(context: context),
-                      count: localAlbumCount,
-                      icon: Icons.smartphone,
+              child: IntrinsicHeight(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.stretch, // Added
+                  spacing: 8.0,
+                  children: [
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "local".t(context: context),
+                        count: localAlbumCount,
+                        icon: Icons.smartphone,
+                      ),
                    ),
-                  ),
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "remote".t(context: context),
-                      count: remoteAlbumCount,
-                      icon: Icons.cloud,
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "remote".t(context: context),
+                        count: remoteAlbumCount,
+                        icon: Icons.cloud,
+                      ),
                    ),
-                  ),
-                ],
+                  ],
+                ),
              ),
            ),
            _SectionHeaderText(text: "other".t(context: context)),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: Flex(
-                direction: Axis.horizontal,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                spacing: 8.0,
-                children: [
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "memories".t(context: context),
-                      count: memoryCount,
-                      icon: Icons.calendar_today,
+              child: IntrinsicHeight(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.stretch, // Added
+                  spacing: 8.0,
+                  children: [
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "memories".t(context: context),
+                        count: memoryCount,
+                        icon: Icons.calendar_today,
+                      ),
                    ),
-                  ),
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "hashed_assets".t(context: context),
-                      count: localHashedCount,
-                      icon: Icons.tag,
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "hashed_assets".t(context: context),
+                        count: localHashedCount,
+                        icon: Icons.tag,
+                      ),
                    ),
-                  ),
-                ],
+                  ],
+                ),
              ),
            ),
            // To be removed once the experimental feature is stable
@@ -364,26 +375,29 @@ class _SyncStatsCounts extends ConsumerWidget {
                  return counts.when(
                    data: (c) => Padding(
                      padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-                      child: Flex(
-                        direction: Axis.horizontal,
-                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        spacing: 8.0,
-                        children: [
-                          Expanded(
-                            child: EntitiyCountTile(
-                              label: "local".t(context: context),
-                              count: c.total,
-                              icon: Icons.delete_outline,
+                      child: IntrinsicHeight(
+                        child: Flex(
+                          direction: Axis.horizontal,
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          crossAxisAlignment: CrossAxisAlignment.stretch, // Added
+                          spacing: 8.0,
+                          children: [
+                            Expanded(
+                              child: EntityCountTile(
+                                label: "local".t(context: context),
+                                count: c.total,
+                                icon: Icons.delete_outline,
+                              ),
                            ),
-                          ),
-                          Expanded(
-                            child: EntitiyCountTile(
-                              label: "hashed_assets".t(context: context),
-                              count: c.hashed,
-                              icon: Icons.tag,
+                            Expanded(
+                              child: EntityCountTile(
+                                label: "hashed_assets".t(context: context),
+                                count: c.hashed,
+                                icon: Icons.tag,
+                              ),
                            ),
-                          ),
-                        ],
+                          ],
+                        ),
                      ),
                    ),
                    loading: () => const CircularProgressIndicator(),
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -50,13 +50,15 @@ RUN --mount=type=cache,id=pnpm-cli,target=/buildcache/pnpm-store \

 FROM builder AS plugins

+ARG TARGETPLATFORM
+
 COPY --from=ghcr.io/jdx/mise:2025.11.3@sha256:ac26f5978c0e2783f3e68e58ce75eddb83e41b89bf8747c503bac2aa9baf22c5 /usr/local/bin/mise /usr/local/bin/mise

 WORKDIR /usr/src/app
 COPY ./plugins/mise.toml ./plugins/
 ENV MISE_TRUSTED_CONFIG_PATHS=/usr/src/app/plugins/mise.toml
 ENV MISE_DATA_DIR=/buildcache/mise
-RUN --mount=type=cache,id=mise-tools,target=/buildcache/mise \
+RUN --mount=type=cache,id=mise-tools-${TARGETPLATFORM},target=/buildcache/mise \
  mise install --cd plugins

 COPY ./plugins ./plugins/
@@ -66,7 +68,7 @@ RUN --mount=type=cache,id=pnpm-plugins,target=/buildcache/pnpm-store \
  --mount=type=bind,source=.pnpmfile.cjs,target=.pnpmfile.cjs \
  --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
  --mount=type=bind,source=pnpm-workspace.yaml,target=pnpm-workspace.yaml \
-  --mount=type=cache,id=mise-tools,target=/buildcache/mise \
+  --mount=type=cache,id=mise-tools-${TARGETPLATFORM},target=/buildcache/mise \
  cd plugins && mise run build

 FROM ghcr.io/immich-app/base-server-prod:202511261514@sha256:c04c1c38dd90e53455b180aedf93c3c63474c8d20ffe2c6d7a3a61a2181e6d29
--- a/web/src/lib/actions/autogrow.ts
+++ b/web/src/lib/actions/autogrow.ts
@@ -1,4 +1,3 @@
-import { tick } from 'svelte';
 import type { Action } from 'svelte/action';

 type Parameters = {
@@ -6,14 +5,19 @@ type Parameters = {
  value: string; // added to enable reactivity
 };

-export const autoGrowHeight: Action<HTMLTextAreaElement, Parameters> = (textarea, { height = 'auto' }) => {
-  const update = () => {
-    void tick().then(() => {
-      textarea.style.height = height;
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    });
+export const autoGrowHeight: Action<HTMLTextAreaElement, Parameters> = (textarea) => {
+  const resize = () => {
+    textarea.style.minHeight = '0';
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
  };

-  update();
-  return { update };
+  resize();
+  textarea.addEventListener('input', resize);
+  return {
+    update: resize,
+    destroy() {
+      textarea.removeEventListener('input', resize);
+    },
+  };
 };
--- a/web/src/lib/components/album-page/albums-table-row.svelte
+++ b/web/src/lib/components/album-page/albums-table-row.svelte
@@ -32,7 +32,7 @@
 </script>

 <tr
-  class="flex h-12 w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
+  class="flex w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:px-5 md:py-2"
  onclick={() => goto(resolve(`${AppRoute.ALBUMS}/${album.id}`))}
  {oncontextmenu}
 >
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -248,7 +248,8 @@
            <textarea
              {disabled}
              bind:value={message}
-              use:autoGrowHeight={{ height: '5px', value: message }}
+              rows="1"
+              use:autoGrowHeight={{ value: message }}
              placeholder={disabled ? $t('comments_are_disabled') : $t('say_something')}
              use:shortcut={{
                shortcut: { key: 'Enter' },
--- a/web/src/lib/components/shared-components/autogrow-textarea.svelte
+++ b/web/src/lib/components/shared-components/autogrow-textarea.svelte
@@ -26,6 +26,7 @@
  class="resize-none {className}"
  onfocusout={updateContent}
  {placeholder}
+  rows="1"
  use:shortcut={{
    shortcut: { key: 'Enter', ctrl: true },
    onShortcut: (e) => e.currentTarget.blur(),
Author	SHA1	Message	Date
midzelis	2a3c1c6e15	fix: autogrow textarea bugs during animation	2025-12-09 15:50:23 +00:00
Yaros	06e79703da	fix(mobile): timeline bottom padding on selection (#24480 )	2025-12-09 09:19:41 -06:00
Yaros	c360781565	fix(mobile): fix overflow text in backup card (#24448 ) * fix(mobile): fix overflow text in backup card * refactor: use intrinsicheight * chore: fix spelling of entitycounttile	2025-12-09 09:03:29 -06:00
idubnori	287f6d5c94	fix(mobile): buttons inside AddActionButton color is the same as background color (#24460 ) * fix: icon & text color in AddActionButton * fix: use Divider	2025-12-08 14:29:31 -06:00
Simon Kubiak	fe9125a3d1	fix(web): [album table view] long album title overflows table row (#24450 ) fix(web): long album title overflows vertically on album page in table view	2025-12-08 15:35:58 +00:00
Yaros	8b31936bb6	fix(mobile): cannot create album while name field is focused (#24449 ) fix(mobile): create album disabled when focused	2025-12-08 09:33:01 -06:00
Sergey Katsubo	19958dfd83	fix(server): building docker image for different platforms on the same host (#24459 ) Fix building docker image for different platforms on the same host Use per-platform mise cache to avoid 'sh: 1: extism-js: not found' This happens due to re-using cached installed binary for another platform	2025-12-08 09:15:43 -06:00