Fix: switch to CSS-based text-truncate

- Eliminate dependence on arbitrary maxlength for truncation
- Ensure truncation is purely visual, and does not touch content

docs/build-system/platforms/web-build-scripts.md

@@ -20,9 +20,6 @@ The web build system is fully integrated into `package.json` with the following
 # Development (starts dev server)
 npm run build:web:dev      # Development server with hot reload
 
-# Development build to dist (no HMR)
-npm run build:web:dev:dist # Development configuration built to dist folder
-
 # Production builds
 npm run build:web:test     # Testing environment build
 npm run build:web:prod     # Production environment build
@@ -59,7 +56,6 @@ The `build-web.sh` script supports comprehensive command-line options:
 
 # Environment-specific builds
 ./scripts/build-web.sh --dev          # Development server
-./scripts/build-web.sh --dev --build-dev-to-dist  # Development build to dist
 ./scripts/build-web.sh --test         # Testing build
 ./scripts/build-web.sh --prod         # Production build
 
@@ -77,7 +73,6 @@ The `build-web.sh` script supports comprehensive command-line options:
 | Option | Description | Default |
 |--------|-------------|---------|
 | `--dev`, `--development` | Development mode (starts dev server) | ✅ |
-| `--build-dev-to-dist` | Build development configuration to dist folder | |
 | `--test` | Testing environment build | |
 | `--prod`, `--production` | Production environment build | |
 | `--docker` | Build and create Docker image | |
@@ -97,14 +92,6 @@ The `build-web.sh` script supports comprehensive command-line options:
 4. **Hot Reload**: Enable live reload and HMR
 5. **PWA Setup**: Configure PWA for development
 
-### Development Build to Dist Flow
-
-1. **Environment Setup**: Load development environment variables
-2. **Validation**: Check for required dependencies
-3. **Build Process**: Run Vite build with development configuration
-4. **Output**: Create static files in dist folder with development settings
-5. **No HMR**: No development server started
-
 ### Production Mode Flow
 
 1. **Environment Setup**: Load production environment variables
@@ -291,30 +278,7 @@ docker push timesafari-web:production
 - **Hot Reload**: Enabled with Vite HMR
 - **Source Maps**: Enabled for debugging
 
-### Development Build to Dist
-
-```bash
-dist/
-├── index.html              # Main HTML file
-├── manifest.webmanifest    # PWA manifest
-├── sw.js                   # Service worker
-├── workbox-*.js           # Workbox library
-└── assets/
-    ├── index-*.js         # Main application bundle (development config)
-    ├── index-*.css        # Stylesheet bundle (development config)
-    ├── icons/             # PWA icons
-    └── images/            # Optimized images
-```
-
-**Features**:
-
-- Development environment variables
-- Source maps enabled
-- No minification
-- PWA enabled for testing
-- No HMR server running
-
-### Production Mode File Structure
+### Production Mode
 
 ```bash
 dist/
@@ -383,20 +347,6 @@ npm run build:web:dev
 # PWA features available
 ```
 
-### Development Build Workflow
-
-```bash
-# Build development configuration to dist
-npm run build:web:dev:dist
-
-# Serve the development build locally
-npm run build:web:serve
-
-# Access at http://localhost:8080
-# No hot reload, but development configuration
-# Useful for testing development settings without HMR
-```
-
 ### Testing Workflow
 
 ```bash

package.json

@@ -42,7 +42,6 @@
     "build:ios:deploy": "./scripts/build-ios.sh --deploy",
     "build:web": "./scripts/build-web.sh",
     "build:web:dev": "./scripts/build-web.sh --dev",
-    "build:web:dev:dist": "./scripts/build-web.sh --dev --build-dev-to-dist",
     "build:web:test": "./scripts/build-web.sh --test",
     "build:web:prod": "./scripts/build-web.sh --prod",
     "build:web:docker": "./scripts/build-web.sh --docker",

scripts/build-web.sh

@@ -44,7 +44,6 @@ BUILD_MODE="development"
 BUILD_ACTION="build"
 DOCKER_BUILD=false
 SERVE_BUILD=false
-BUILD_DEV_TO_DIST=false
 
 # Function to show usage
 show_usage() {
@@ -62,7 +61,6 @@ OPTIONS:
     --help                  Show this help message
     --verbose               Enable verbose logging
     --env                   Show environment variables
-    --build-dev-to-dist     Build development configuration to dist folder
 
 EXAMPLES:
     $0                                   # Development build
@@ -72,7 +70,6 @@ EXAMPLES:
     $0 --docker:test                     # Test + Docker
     $0 --docker:prod                     # Production + Docker
     $0 --serve                           # Build and serve
-    $0 --build-dev-to-dist               # Build development configuration to dist folder
 
 BUILD MODES:
     development: Starts Vite development server with hot reload (default)
@@ -128,10 +125,6 @@ parse_web_args() {
                 print_env_vars "VITE_"
                 exit 0
                 ;;
-            --build-dev-to-dist)
-                BUILD_DEV_TO_DIST=true
-                shift
-                ;;
             *)
                 log_warn "Unknown option: $1"
                 shift
@@ -328,28 +321,10 @@ setup_web_environment
 
 # Handle different build modes
 if [ "$BUILD_MODE" = "development" ] && [ "$DOCKER_BUILD" = false ] && [ "$SERVE_BUILD" = false ]; then
-    # Check if we want to build development to dist instead of starting dev server
-    if [ "$BUILD_DEV_TO_DIST" = true ]; then
-        # Development build mode: Build to dist with development configuration
-        log_info "Development build mode detected - building to dist with development configuration"
-        
-        # Step 1: Clean dist directory
-        log_info "Cleaning dist directory..."
-        clean_build_artifacts "dist"
-        
-        # Step 2: Execute Vite build with development configuration
-        safe_execute "Vite development build" "execute_vite_build development" || exit 3
-        
-        log_success "Development build completed successfully!"
-        log_info "Development build output available in: dist/"
-        print_footer "Web Development Build"
-        exit 0
-    else
-        # Development mode: Start dev server
-        log_info "Development mode detected - starting development server"
-        start_dev_server
-        # Note: start_dev_server doesn't return, it runs the server
-    fi
+    # Development mode: Start dev server
+    log_info "Development mode detected - starting development server"
+    start_dev_server
+    # Note: start_dev_server doesn't return, it runs the server
 elif [ "$SERVE_BUILD" = true ]; then
     # Serve mode: Build then serve
     log_info "Serve mode detected - building then serving"

src/App.vue

@@ -27,9 +27,9 @@
             v-if="notification.type === 'toast'"
             class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
           >
-            <div class="w-full px-4 py-3">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+            <div class="w-full px-4 py-3 overflow-hidden">
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
             </div>
           </div>
 
@@ -46,9 +46,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900 overflow-hidden">
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
@@ -72,9 +72,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+            <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900 overflow-hidden">
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
@@ -98,9 +98,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+            <div class="relative w-full pl-4 pr-8 py-2 text-amber-900 overflow-hidden">
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
@@ -124,9 +124,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+            <div class="relative w-full pl-4 pr-8 py-2 text-rose-900 overflow-hidden">
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
@@ -349,13 +349,6 @@ export default class App extends Vue {
 
   stopAsking = false;
 
-  truncateLongWords(sentence: string) {
-    return sentence
-      .split(" ")
-      .map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
-      .join(" ");
-  }
-
   async turnOffNotifications(
     notification: NotificationIface,
   ): Promise<boolean> {