Feature/mobile optimizations - #526
Merged
Merged
Conversation
- Remove chat application entirely from frontend and backend - Add mobile-first responsive improvements across all main pages - Fix GlobalMenu footer layout on phone (social buttons below text) - Redesign home page: icon-only navigation on phone, prominent JokeOfTheDay card - Redesign memorandum empty state with Carbon Tile cards and CTA buttons - FAB: primary variant, hidden in empty state, respects safe-area-inset - Add viewport-fit=cover for iPhone notch/home-indicator support - Fix duplicate text-shadow in uno-sort h1 - Reset button in uno-sort: icon-only on phone, icon+text on larger screens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Folder.svelte and Link.svelte: Add mobile overflow menu (OverflowMenu) visible on phone/tablet with all context menu actions. Desktop keeps right-click ContextMenu unchanged. Also add min-height: 44px for arrow_button on $phone. Todo.svelte: Add mobile-only edit button (pencil icon) visible on $phone as alternative to right-click ContextMenu. Add min-height: 44px for save/cancel buttons on mobile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
admin/+layout.svelte: Replace width: 100vw with width: 100% to prevent horizontal overflow past the parent padding. Add safe-area-inset-bottom to FAB button position for iPhone notch/home indicator. styles.css: Replace width: calc(100vw - ...) with width: 100% in admin_list_item_content to match parent container width. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
FolderOverlay.svelte: Add hasScrollingContent prop to Modal so content with 4 sliders + inputs is scrollable on mobile instead of overflowing. Also add flex-wrap: wrap for color value fields on $phone. TodoInput.svelte: Add flex-wrap: wrap on $phone so title input, category input and add button stack vertically instead of becoming too narrow. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace height: Xvh with double-declaration (Xvh; Xdvh) pattern across all affected components so iOS Safari with dynamic toolbar doesn't clip content. Also update background-size in styles.css to use dvh. Affected files: +layout.svelte, uno-sort/+page.svelte, Jokes.svelte, AboutInfo.svelte, ToggledApplicationInfo.svelte, styles.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ContentOutput.svelte: Set max-width: 100% on $phone for both .prompt_output (was 50vw = 188px) and .image_preview (was 33vw = 124px). DebugInformation.svelte: Wrap 7-column table in .table_scroll div with overflow-x: auto to prevent horizontal overflow on mobile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
TodoList.svelte: Add min-height/min-width: 44px on $phone for .view_btn (list/category/cleanup) and .header_toggle_btn (collapse/expand). GenericListOverlay.svelte: Add min-height/min-width: 44px on $phone for .item_delete_btn. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
JokeOfTheDay.svelte: Increase date font-size from 0.65rem (10.4px) to 0.75rem (12px) for better readability. Todo.svelte: Add font-size: 16px on $phone for title/category inputs to prevent iOS Safari auto-zoom. Hide Tab autocomplete hint on mobile as mobile keyboards lack a Tab key. TodoInput.svelte: Hide Tab autocomplete hint on $phone. OnlinePersistenceCheck.svelte: Add flex-wrap: wrap on mobile and make TextInput full-width so it stacks above the submit button. todo/+page.svelte: Add flex-wrap: wrap for empty-state button group (Neue Liste + Liste importieren). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Document all changes from the second round of mobile optimizations: ContextMenu alternatives, Admin fixes, FolderOverlay scrolling, dvh fallbacks, Food-Scan responsive, touch targets, and smaller fixes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ignment Slider-Reaktivität: Ersetze class-basiertes $state(defaultColor) durch individuelle primitive $state-Variablen (r, g, b, a). Der vorherige Ansatz brach die Svelte 5 Reaktivität, weil der $effect das reactive Proxy durch das rohe Singleton-Objekt ersetzte, wodurch Slider-Änderungen nicht mehr getrackt wurden. customColor ist jetzt $derived. Checkbox-Label: Ersetze <svelte:fragment slot="labelText"> durch labelText-Prop, da der Slot-Ansatz in Svelte 5 / Carbon nicht korrekt rendert (kein Text wurde angezeigt). Werte-Bereich Einrückung: Entferne justify-content: center aus .folder_color_value_fields und füge flex: 1 für beide Untergruppen hinzu, sodass Felder linksbündig am Rand beginnen. Abstand: margin-top: 1rem auf .color_settings für Abstand zur Checkbox. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Show a colored box above the RGBA sliders that displays the current folder background color and updates in real time as sliders are adjusted. Explanatory text sits next to the box describing its purpose. New i18n keys: page.memorandum.folder.colorPreviewLabel and page.memorandum.folder.colorPreviewDescription (de + en). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The OverflowMenu already exposes all move actions on touch devices. Replace min-height: 44px override with display: none on $phone/$tablet for .arrow_button in both Folder.svelte and Link.svelte. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.