Optimized logs

lib/l10n/app_en.arb

@@ -606,5 +606,6 @@
     "remainingTime": "Remaining time",
     "safeSearchSettings": "Safe search settings",
     "loadingSafeSearchSettings": "Loading safe search settings...",
-    "safeSearchSettingsNotLoaded": "Error when loading safe search settings."
+    "safeSearchSettingsNotLoaded": "Error when loading safe search settings.",
+    "loadingLogsSettings": "Loading logs settings..."
 }

lib/l10n/app_es.arb

@@ -606,5 +606,6 @@
     "remainingTime": "Tiempo restante",
     "safeSearchSettings": "Configuración de búsqueda segura",
     "loadingSafeSearchSettings": "Cargando configuración de búsqueda segura...",
-    "safeSearchSettingsNotLoaded": "Error al cargar la configuración de búsqueda segura."
+    "safeSearchSettingsNotLoaded": "Error al cargar la configuración de búsqueda segura.",
+    "loadingLogsSettings": "Cargando configuración de registros..."
 }

lib/screens/logs/clients_modal.dart

@@ -8,10 +8,12 @@ import 'package:adguard_home_manager/providers/logs_provider.dart';
 
 class ClientsModal extends StatefulWidget {
   final List<String>? value;
+  final bool dialog;
 
   const ClientsModal({
     Key? key,
-    required this.value
+    required this.value,
+    required this.dialog
   }) : super(key: key);
 
   @override
@@ -94,18 +96,11 @@ class _ClientsModalState extends State<ClientsModal> {
       });
     }
 
-    return Container(
+    Widget content() {
-      height: height >= (logsProvider.clients!.length*64) == true
+      return Column(
-        ? logsProvider.clients!.length*64
+        mainAxisSize: MainAxisSize.min,
-        : height-50,
+        children: [
-      decoration: BoxDecoration(
+          Column(
-        borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(28),
-          topRight: Radius.circular(28) 
-        ),
-        color: Theme.of(context).dialogBackgroundColor
-      ),
-      child: Column(
             children: [
               Padding(
                 padding: const EdgeInsets.only(
@@ -127,11 +122,10 @@ class _ClientsModalState extends State<ClientsModal> {
                 ),
               ),
               const SizedBox(height: 16),
-          Expanded(
+            ],
+          ),
+          Flexible(
             child: ListView.builder(
-              physics: height >= (logsProvider.clients!.length*64) == true
-                ? const NeverScrollableScrollPhysics()
-                : null,
               itemCount: logsProvider.clients!.length,
               itemBuilder: (context, index) => listItem(
                 label: logsProvider.clients![index].ip, 
@@ -150,7 +144,7 @@ class _ClientsModalState extends State<ClientsModal> {
                   }
                 }
               )
-            ),
+            )
           ),
           Padding(
             padding: const EdgeInsets.all(24),
@@ -176,7 +170,35 @@ class _ClientsModalState extends State<ClientsModal> {
           ),
           if (Platform.isIOS) const SizedBox(height: 16)
         ],
+      );
+    }
+
+    if (widget.dialog == true) {
+      return Dialog(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(
+            maxWidth: 500
+          ),
+          child: content()
         ),
       );
     }
+    else {
+      return ConstrainedBox(
+        constraints: BoxConstraints(
+          maxHeight: height-50
+        ),
+        child: Container(
+          decoration: BoxDecoration(
+            borderRadius: const BorderRadius.only(
+              topLeft: Radius.circular(28),
+              topRight: Radius.circular(28) 
+            ),
+            color: Theme.of(context).dialogBackgroundColor
+          ),
+          child: content()
+        ),
+      );
+    }
+  }
 }

lib/screens/logs/filter_status_modal.dart

@@ -8,10 +8,12 @@ import 'package:adguard_home_manager/providers/logs_provider.dart';
 
 class FilterStatusModal extends StatefulWidget {
   final String value;
+  final bool dialog;
 
   const FilterStatusModal({
     Key? key,
-    required this.value
+    required this.value,
+    required this.dialog
   }) : super(key: key);
 
   @override
@@ -31,8 +33,6 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
   Widget build(BuildContext context) {
     final logsProvider = Provider.of<LogsProvider>(context);
 
-    final height = MediaQuery.of(context).size.height;
-
     void apply() async {
       logsProvider.setSelectedResultStatus(selectedResultStatus);
 
@@ -83,18 +83,18 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
       );
     }
 
-    return Container(
+    Widget content() {
-      height: height >= (Platform.isIOS ? 736 : 720) == true
+      return Column(
-        ? (Platform.isIOS ? 736 : 720)
+        mainAxisSize: MainAxisSize.min,
-        : height-25,
+        children: [
-      decoration: BoxDecoration(
+          Flexible(
-        borderRadius: const BorderRadius.only(
+            child: SingleChildScrollView(
-          topLeft: Radius.circular(28),
+              child: Wrap(
-          topRight: Radius.circular(28) 
+                children: [
-        ),
+                  Row(
-        color: Theme.of(context).dialogBackgroundColor
+                    mainAxisAlignment: MainAxisAlignment.center,
-      ),
+                    children: [
-      child: Column(
+                      Column(
                         children: [
                           Padding(
                             padding: const EdgeInsets.only(
@@ -115,13 +115,11 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
                               color: Theme.of(context).colorScheme.onSurface
                             ),
                           ),
-          const SizedBox(height: 16),
+                        ],
-          Expanded(
+                      )
-            child: ListView(
+                    ],
-              physics: height >= 720 == true
+                  ),
-                ? const NeverScrollableScrollPhysics()
+                  Container(height: 16),
-                : null,
-              children: [
                   filterStatusListItem(
                     id: "all",
                     icon: Icons.shield_rounded, 
@@ -174,6 +172,7 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
                 ],
               ),
             ),
+          ),
           Padding(
             padding: const EdgeInsets.all(24),
             child: Row(
@@ -188,7 +187,30 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
           ),
           if (Platform.isIOS) const SizedBox(height: 16)
         ],
+      );
+    }
+
+    if (widget.dialog == true) {
+      return Dialog(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(
+            maxWidth: 400
+          ),
+          child: content()
         ),
       );  
     }
+    else {
+      return Container(
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.only(
+            topLeft: Radius.circular(28),
+            topRight: Radius.circular(28) 
+          ),
+          color: Theme.of(context).dialogBackgroundColor
+        ),
+        child: content()
+      );
+    }
+  }
 }

lib/screens/logs/log_tile.dart

@@ -1,10 +1,10 @@
 // ignore_for_file: use_build_context_synchronously
+
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:adguard_home_manager/screens/home/top_items_options_modal.dart';
-import 'package:adguard_home_manager/screens/logs/log_details_screen.dart';
 
 import 'package:adguard_home_manager/functions/copy_clipboard.dart';
 import 'package:adguard_home_manager/functions/block_unblock_domain.dart';
@@ -18,12 +18,16 @@ class LogTile extends StatelessWidget {
   final Log log;
   final int length;
   final int index;
+  final bool? isLogSelected;
+  final void Function(Log) onLogTap;
 
   const LogTile({
     Key? key,
     required this.log,
     required this.length,
-    required this.index
+    required this.index,
+    this.isLogSelected,
+    required this.onLogTap
   }) : super(key: key);
 
   @override
@@ -96,12 +100,197 @@ class LogTile extends StatelessWidget {
       );
     }
 
+    if (width > 1100) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        child: Material(
+          color: Colors.transparent,
+          borderRadius: BorderRadius.circular(28),
+          child: InkWell(
+            borderRadius: BorderRadius.circular(28),
+            onTap: () => onLogTap(log),
+            child: Container(
+              width: double.maxFinite,
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(28),
+                color: isLogSelected == true
+                  ? Theme.of(context).colorScheme.primaryContainer
+                  : null
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Flexible(
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Flexible(
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                log.question.name,
+                                style: TextStyle(
+                                  fontSize: 16,
+                                  fontWeight: FontWeight.w400,
+                                  color: Theme.of(context).colorScheme.onSurface,
+                                ),
+                              ),
+                              const SizedBox(height: 5),
+                              if (log.client.length <= 15 && appConfigProvider.showNameTimeLogs == false) Row(
+                                children: [
+                                  ...[
+                                    Icon(
+                                      Icons.smartphone_rounded,
+                                      size: 16,
+                                      color: Theme.of(context).listTileTheme.textColor,
+                                    ),
+                                    const SizedBox(width: 5),
+                                    Flexible(
+                                      child: Text(
+                                        log.client,
+                                        overflow: TextOverflow.ellipsis,
+                                        style: TextStyle(
+                                          color: Theme.of(context).listTileTheme.textColor,
+                                          fontSize: 14,
+                                          height: 1.4,
+                                          fontWeight: FontWeight.w400,
+                                        ),
+                                      ),
+                                    )
+                                  ],
+                                  const SizedBox(width: 15),
+                                  ...[
+                                    Icon(
+                                      Icons.schedule_rounded,
+                                      size: 16,
+                                      color: Theme.of(context).listTileTheme.textColor,
+                                    ),
+                                    const SizedBox(width: 5),
+                                    Flexible(
+                                      child: Text(
+                                        convertTimestampLocalTimezone(log.time, 'HH:mm:ss'),
+                                        overflow: TextOverflow.ellipsis,
+                                        style: TextStyle(
+                                          color: Theme.of(context).listTileTheme.textColor,
+                                          fontSize: 13
+                                        ),
+                                      ),
+                                    ),
+                                  ],
+                                ],
+                              ),
+                              if (log.client.length > 15 || appConfigProvider.showNameTimeLogs == true) Column(
+                                children: [
+                                  Row(
+                                    children: [
+                                      Icon(
+                                        Icons.smartphone_rounded,
+                                        size: 16,
+                                        color: Theme.of(context).listTileTheme.textColor,
+                                      ),
+                                      const SizedBox(width: 15),
+                                      Flexible(
+                                        child: Text(
+                                          log.client,
+                                          overflow: TextOverflow.ellipsis,
+                                          style: TextStyle(
+                                            color: Theme.of(context).listTileTheme.textColor,
+                                            fontSize: 13
+                                          ),
+                                        ),
+                                      )
+                                    ],
+                                  ),
+                                  if (appConfigProvider.showNameTimeLogs == true && log.clientInfo!.name != '') ...[
+                                    const SizedBox(height: 10),
+                                    Row(
+                                      children: [
+                                        Icon(
+                                          Icons.badge_rounded,
+                                          size: 16,
+                                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                                        ),
+                                        const SizedBox(width: 15),
+                                        Flexible(
+                                          child: Text(
+                                            log.clientInfo!.name,
+                                            overflow: TextOverflow.ellipsis,
+                                            style: TextStyle(
+                                              color: Theme.of(context).listTileTheme.textColor,
+                                              fontSize: 13
+                                            ),
+                                          ),
+                                        )
+                                      ],
+                                    ),
+                                  ],
+                                  const SizedBox(height: 10),
+                                  Row(
+                                    children: [
+                                      Icon(
+                                        Icons.schedule_rounded,
+                                        size: 16,
+                                        color: Theme.of(context).listTileTheme.textColor,
+                                      ),
+                                      const SizedBox(width: 15),
+                                      SizedBox(
+                                        child: Text(
+                                          convertTimestampLocalTimezone(log.time, 'HH:mm:ss'),
+                                          overflow: TextOverflow.ellipsis,
+                                          style: TextStyle(
+                                            color: Theme.of(context).listTileTheme.textColor,
+                                            fontSize: 13
+                                          ),
+                                        ),
+                                      )
+                                    ],
+                                  ),
+                                  if (appConfigProvider.showNameTimeLogs == true && log.elapsedMs != '') ...[
+                                    const SizedBox(height: 10),
+                                    Row(
+                                      children: [
+                                        Icon(
+                                          Icons.timer,
+                                          size: 16,
+                                          color: Theme.of(context).listTileTheme.textColor,
+                                        ),
+                                        const SizedBox(width: 15),
+                                        SizedBox(
+                                          child: Text(
+                                            "${double.parse(log.elapsedMs).toStringAsFixed(2)} ms",
+                                            overflow: TextOverflow.ellipsis,
+                                            style: TextStyle(
+                                              color: Theme.of(context).listTileTheme.textColor,
+                                              fontSize: 13
+                                            ),
+                                          ),
+                                        )
+                                      ],
+                                    ),
+                                  ],
+                                ],
+                              ),
+                            ],
+                          ),
+                        )
+                      ],
+                    ),
+                  ),
+                  generateLogStatus()
+                ],
+              )
+            ),
+          ),
+        ),
+      );
+    }
+    else {
       return Material(
         color: Colors.transparent,
         child: InkWell(
-        onTap: () => Navigator.push(context, MaterialPageRoute(
+          onTap: () => onLogTap(log),
-          builder: (context) => LogDetailsScreen(log: log)
-        )),
           onLongPress: () => openOptionsModal(log),
           child: Container(
             width: double.maxFinite,
@@ -109,8 +298,7 @@ class LogTile extends StatelessWidget {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-              SizedBox(
+                Expanded(
-                width: width-130,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
@@ -269,4 +457,5 @@ class LogTile extends StatelessWidget {
         ),
       );
     }
+  }
 }

lib/screens/logs/logs.dart

@@ -1,5 +1,7 @@
 // ignore_for_file: use_build_context_synchronously
 
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -7,6 +9,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:adguard_home_manager/screens/logs/logs_filters_modal.dart';
 import 'package:adguard_home_manager/screens/logs/logs_config_modal.dart';
 import 'package:adguard_home_manager/screens/logs/log_tile.dart';
+import 'package:adguard_home_manager/screens/logs/log_details_screen.dart';
 
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/classes/process_modal.dart';
@@ -64,6 +67,8 @@ class _LogsWidgetState extends State<LogsWidget> {
 
   bool showDivider = true;
 
+  Log? selectedLog;
+
   Future fetchLogs({
     int? inOffset,
     bool? loadingMore,
@@ -188,6 +193,8 @@ class _LogsWidgetState extends State<LogsWidget> {
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
     final logsProvider = Provider.of<LogsProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     void updateConfig(Map<String, dynamic> data) async {
       ProcessModal processModal = ProcessModal(context: context);
       processModal.open(AppLocalizations.of(context)!.updatingSettings);
@@ -252,13 +259,26 @@ class _LogsWidgetState extends State<LogsWidget> {
 
 
     void openFilersModal() {
+      if (width > 700 || !(Platform.isAndroid || Platform.isIOS)) {
+        showDialog(
+          context: context, 
+          builder: (context) => const LogsFiltersModal(
+            dialog: true,
+          ),
+          barrierDismissible: false
+        );
+      }
+      else {
         showModalBottomSheet(
           context: context, 
-        builder: (context) => const LogsFiltersModal(),
+          builder: (context) => const LogsFiltersModal(
+            dialog: false,
+          ),
           backgroundColor: Colors.transparent,
           isScrollControlled: true
         );
       }
+    }
 
     final Map<String, String> translatedString = {
       "all": AppLocalizations.of(context)!.all, 
@@ -319,6 +339,15 @@ class _LogsWidgetState extends State<LogsWidget> {
                         log: logsProvider.logsData!.data[index],
                         index: index,
                         length: logsProvider.logsData!.data.length,
+                        isLogSelected: selectedLog != null && selectedLog == logsProvider.logsData!.data[index],
+                        onLogTap: (log) {
+                          if (width <= 700) {
+                            Navigator.push(context, MaterialPageRoute(
+                              builder: (context) => LogDetailsScreen(log: log)
+                            ));
+                          }
+                          setState(() => selectedLog = log);
+                        }
                       );
                     }
                   }
@@ -383,28 +412,50 @@ class _LogsWidgetState extends State<LogsWidget> {
       }
     }
 
+    Widget logsScreen() {
       return Scaffold(
         appBar: AppBar(
           title: Text(AppLocalizations.of(context)!.logs),
           centerTitle: false,
           actions: [
+            if (!(Platform.isAndroid || Platform.isIOS)) IconButton(
+              onPressed: () => fetchLogs(inOffset: 0), 
+              icon: const Icon(Icons.refresh_rounded),
+              tooltip: AppLocalizations.of(context)!.refresh,
+            ),
             logsProvider.loadStatus == 1 
               ? IconButton(
                   onPressed: openFilersModal, 
-                icon: const Icon(Icons.filter_list_rounded)
+                  icon: const Icon(Icons.filter_list_rounded),
+                  tooltip: AppLocalizations.of(context)!.filters,
                 )
               : const SizedBox(),
             IconButton(
+              tooltip: AppLocalizations.of(context)!.settings,
               onPressed: () => {
+                if (width > 700 || !(Platform.isAndroid || Platform.isIOS)) {
+                  showDialog(
+                    context: context, 
+                    builder: (context) => LogsConfigModal(
+                      onConfirm: updateConfig,
+                      onClear: clearQueries,
+                      dialog: true,
+                    ),
+                    barrierDismissible: false
+                  )
+                }
+                else {
                   showModalBottomSheet(
                     context: context, 
                     builder: (context) => LogsConfigModal(
                       onConfirm: updateConfig,
                       onClear: clearQueries,
+                      dialog: false,
                     ),
                     backgroundColor: Colors.transparent,
                     isScrollControlled: true
                   )
+                }
               }, 
               icon: const Icon(Icons.settings)
             ),
@@ -540,4 +591,28 @@ class _LogsWidgetState extends State<LogsWidget> {
         body: generateBody()
       );
     }
+
+    if (width > 1100) {
+      return Material(
+        color: Colors.transparent,
+        child: Row(
+          children: [
+            Expanded(
+              flex: 1,
+              child: logsScreen()
+            ),
+            Expanded(
+              flex: 2,
+              child: selectedLog != null
+                ? LogDetailsScreen(log: selectedLog!)
+                : const SizedBox()
+            )
+          ],
+        ),
+      );
+    }
+    else {
+      return logsScreen();
+    }
+  }
 }

lib/screens/logs/logs_config_modal.dart

@@ -12,11 +12,13 @@ import 'package:adguard_home_manager/providers/servers_provider.dart';
 class LogsConfigModal extends StatelessWidget {
   final void Function(Map<String, dynamic>) onConfirm;
   final void Function() onClear;
+  final bool dialog;
 
   const LogsConfigModal({
     Key? key,
     required this.onConfirm,
     required this.onClear,
+    required this.dialog
   }) : super(key: key);
 
   @override
@@ -30,6 +32,7 @@ class LogsConfigModal extends StatelessWidget {
       context: context,
       onConfirm: onConfirm,
       onClear: onClear,
+      dialog: dialog,
     );
   }
 }
@@ -40,6 +43,7 @@ class LogsConfigModalWidget extends StatefulWidget {
   final BuildContext context;
   final void Function(Map<String, dynamic>) onConfirm;
   final void Function() onClear;
+  final bool dialog;
 
   const LogsConfigModalWidget({
     Key? key,
@@ -48,6 +52,7 @@ class LogsConfigModalWidget extends StatefulWidget {
     required this.context,
     required this.onConfirm,
     required this.onClear,
+    required this.dialog
   }) : super(key: key);
 
   @override
@@ -146,18 +151,42 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
     Widget generateBody() {
       switch (loadStatus) {
         case 0:
-          return const Center(
+          return Padding(
-            child: CircularProgressIndicator(),
+            padding: const EdgeInsets.all(24),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const CircularProgressIndicator(),
+                const SizedBox(height: 30),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 20),
+                  child: Text(
+                    AppLocalizations.of(context)!.loadingLogsSettings,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontSize: 22,
+                      color: Theme.of(context).colorScheme.onSurfaceVariant
+                    ),
+                  ),
+                )
+              ],
+            ),
           );
 
         case 1:
           return Column(
+            mainAxisSize: MainAxisSize.min,
             children: [
-              Expanded(
+              Flexible(
-                child: ListView(
+                child: SingleChildScrollView(
-                  physics: (Platform.isIOS ? 436 : 420) < MediaQuery.of(context).size.height
+                  child: Wrap(
-                    ? const NeverScrollableScrollPhysics() 
+                    children: [
-                    : null,
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Column(
                             children: [
                               Padding(
                                 padding: const EdgeInsets.only(top: 24),
@@ -177,6 +206,10 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
                                 ), 
                               ),
                               const SizedBox(height: 16),
+                            ],
+                          ),
+                        ],
+                      ),
                       Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 24),
                         child: Material(
@@ -209,7 +242,7 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
                           ),
                         ),
                       ),
-                    const SizedBox(height: 16),
+                      Container(height: 16),
                       Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 14),
                         child: Column(
@@ -238,7 +271,7 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
                                 ),
                               ),
                             ),
-                          const SizedBox(height: 16),
+                            Container(height: 16),
                             Padding(
                               padding: const EdgeInsets.symmetric(horizontal: 24),
                               child: DropdownButtonFormField(
@@ -267,6 +300,7 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
                     ],
                   ),
                 ),
+              ),
               Padding(
                 padding: const EdgeInsets.all(24),
                 child: Row(
@@ -316,11 +350,10 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
           );
 
         case 2:
-          return SizedBox(
+          return Column(
-            width: double.maxFinite,
-            child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisSize: MainAxisSize.min,
             children: [
               const Icon(
                 Icons.error,
@@ -333,14 +366,13 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
                 child: Text(
                   AppLocalizations.of(context)!.logSettingsNotLoaded,
                   textAlign: TextAlign.center,
-                    style: const TextStyle(
+                  style: TextStyle(
                     fontSize: 22,
-                      color: Colors.grey,
+                    color: Theme.of(context).colorScheme.onSurfaceVariant
                   ),
                 ),
               )
             ],
-            ),
           );
 
         default:
@@ -348,6 +380,17 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
       }
     }
 
+    if (widget.dialog == true) {
+      return Dialog(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(
+            maxWidth: 500
+          ),
+          child: generateBody()
+        ),
+      );
+    }
+    else {
       return Container(
         height: Platform.isIOS ? 436 : 420,
         decoration: BoxDecoration(
@@ -360,4 +403,5 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
         child: generateBody()
       );
     }
+  }
 }

lib/screens/logs/logs_filters_modal.dart

@@ -18,24 +18,32 @@ import 'package:adguard_home_manager/models/applied_filters.dart';
 import 'package:adguard_home_manager/providers/logs_provider.dart';
 
 class LogsFiltersModal extends StatelessWidget {
-  const LogsFiltersModal({Key? key}) : super(key: key);
+  final bool dialog;
+
+  const LogsFiltersModal({
+    Key? key,
+    required this.dialog
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final logsProvider = Provider.of<LogsProvider>(context);
 
     return LogsFiltersModalWidget(
-      logsProvider: logsProvider
+      logsProvider: logsProvider,
+      dialog: dialog,
     );
   }
 }
 
 class LogsFiltersModalWidget extends StatefulWidget {
   final LogsProvider logsProvider;
+  final bool dialog;
 
   const LogsFiltersModalWidget({
     Key? key,
-    required this.logsProvider
+    required this.logsProvider,
+    required this.dialog
   }) : super(key: key);
 
   @override
@@ -57,6 +65,8 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
     final serversProvider = Provider.of<ServersProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     final Map<String, String> translatedString = {
       "all": AppLocalizations.of(context)!.all, 
       "filtered": AppLocalizations.of(context)!.filtered, 
@@ -101,26 +111,52 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
     }
 
     void openSelectFilterStatus() {
+      if (width > 700 || !(Platform.isAndroid || Platform.isIOS)) {
+        showDialog(
+          barrierDismissible: false,
+          context: context, 
+          builder: (context) => FilterStatusModal(
+            value: logsProvider.selectedResultStatus,
+            dialog: true,
+          ),
+        );
+      }
+      else {
         showModalBottomSheet(
           context: context, 
           builder: (context) => FilterStatusModal(
             value: logsProvider.selectedResultStatus,
+            dialog: false,
           ),
           isScrollControlled: true,
           backgroundColor: Colors.transparent
         );
       }
+    }
 
     void openSelectClients() {
+      if (width > 700 || !(Platform.isAndroid || Platform.isIOS)) {
+        showDialog(
+          context: context,
+          builder: (context) => ClientsModal(
+            value: logsProvider.selectedClients,
+            dialog: true,
+          ),
+          barrierDismissible: false
+        );
+      }
+      else {
         showModalBottomSheet(
           context: context, 
           builder: (context) => ClientsModal(
             value: logsProvider.selectedClients,
+            dialog: false,
           ),
           isScrollControlled: true,
           backgroundColor: Colors.transparent
         );
       }
+    }
 
     void filterLogs() async {
       Navigator.pop(context);
@@ -161,24 +197,18 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
       }
     }
 
-    return Padding(
+    Widget content() {
-      padding: MediaQuery.of(context).viewInsets,
+      return Column(
-      child: Container(
+        mainAxisSize: MainAxisSize.min,
-        height: Platform.isIOS ? 446 : 430,
-        decoration: BoxDecoration(
-          color: Theme.of(context).dialogBackgroundColor,
-          borderRadius: const BorderRadius.only(
-            topLeft: Radius.circular(28),
-            topRight: Radius.circular(28)
-          )
-        ),
-        child: Column(
         children: [
-            Expanded(
+          Flexible(
-              child: ListView(
+            child: SingleChildScrollView(
-                physics: (Platform.isIOS ? 416 : 400) < MediaQuery.of(context).size.height
+              child: Wrap(
-                  ? const NeverScrollableScrollPhysics() 
+                children: [
-                  : null,
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Column(
                         children: [
                           Padding(
                             padding: const EdgeInsets.only(
@@ -202,6 +232,10 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
                             ),
                           ),
                           const SizedBox(height: 16),
+                        ],
+                      ),
+                    ],
+                  ),
                   Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 24),
                     child: Row(
@@ -233,7 +267,7 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
                       ],
                     ),
                   ),
-                  const SizedBox(height: 16),
+                  Container(height: 16),
                   CustomListTile(
                     title: AppLocalizations.of(context)!.client,
                     subtitle: logsProvider.selectedClients != null
@@ -270,6 +304,7 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
                 ],
               ),
             ),
+          ),
           Padding(
             padding: const EdgeInsets.all(24),
             child: Row(
@@ -288,8 +323,36 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
           ),
           if (Platform.isIOS) const SizedBox(height: 16)
         ],
+      );
+    }
+
+    if (widget.dialog == true) {
+      return Padding(
+        padding: MediaQuery.of(context).viewInsets,
+        child: Dialog(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(
+              maxWidth: 500
             ),
+            child: content()
+          )
         ),
       );
     }
+    else {
+      return Padding(
+        padding: MediaQuery.of(context).viewInsets,
+        child: Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).dialogBackgroundColor,
+            borderRadius: const BorderRadius.only(
+              topLeft: Radius.circular(28),
+              topRight: Radius.circular(28)
+            )
+          ),
+          child: content()
+        ),
+      );
+    }
+  }
 }