Edits 50 (#1034)

docs/faq.md

@@ -161,7 +161,7 @@ clearml-session==0.3.2
 #### How can I sort models by a certain metric?   <a id="custom-columns"></a>
 
 To sort models by a metric, in the ClearML Web UI, 
-add a [custom column](webapp/webapp_model_table.md#customizing-the-models-table) to the model table and sort by 
+add a [custom column](webapp/webapp_model_table.md#customizing-the-model-table) to the model table and sort by 
 that metric column. Available custom column options depend upon the models in the table and the metrics that have been
 attached to them (see [Logging Metrics and Plots](clearml_sdk/model_sdk.md#logging-metrics-and-plots)). 
 

docs/webapp/applications/apps_dashboard.md

@@ -38,9 +38,13 @@ of the chosen metric over time.
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create 
   a new instance with the same configuration.
   
+<div class="max-w-65">
+
 ![Dashboard app instance launch form](../../img/apps_dashboard_wizard.png#light-mode-only)
 ![Dashboard app instance launch form](../../img/apps_dashboard_wizard_dark.png#dark-mode-only)
 
+</div>
+
 ## Dashboard
 
 Once a project dashboard instance is launched, its dashboard displays the following information about a project:  

docs/webapp/applications/apps_embed_model_deployment.md

@@ -91,5 +91,9 @@ Deployment app instance task will be enqueued (make sure an agent is assigned to
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create a 
 new instance with the same configuration
 
+<div class="max-w-65">
+
 ![Embedding Model Deployment form](../../img/apps_embedding_model_deployment_form.png#light-mode-only)
 ![Embedding Model Deployment form](../../img/apps_embedding_model_deployment_form_dark.png#dark-mode-only)
+
+</div>

docs/webapp/applications/apps_hpo.md

@@ -74,9 +74,13 @@ limits.
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create 
   a new instance with the same configuration 
   
+<div class="max-w-65">
+
 ![HPO app instance launch form](../../img/apps_hpo_wizard.png#light-mode-only)
 ![HPO app instance launch form](../../img/apps_hpo_wizard_dark.png#dark-mode-only)
  
+</div>
+
 ## Dashboard
 Once an HPO instance is launched, the dashboard displays a summary of the optimization process.
 

docs/webapp/applications/apps_llama_deployment.md

@@ -78,4 +78,8 @@ values from the file, which can be modified before launching the app instance
   Used to stop the application from entering an idle state when the machine metrics are low but the application is 
   actually still running
 
+<div class="max-w-65">
+
 ![llama deployment app form](../../img/apps_llama_form.png)
+
+</div>

docs/webapp/applications/apps_model_deployment.md

@@ -146,6 +146,9 @@ instance task will be enqueued (make sure an agent is assigned to that queue)
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create a 
 new instance with the same configuration
 
+<div class="max-w-65">
+
 ![vLLM Model Deployment app form](../../img/apps_model_deployment_form.png#light-mode-only)
 ![vLLM Model Deployment app form](../../img/apps_model_deployment_form_dark.png#dark-mode-only)
  
+</div>

docs/webapp/applications/apps_ssh_session.md

@@ -93,5 +93,9 @@ closed and restored into a new instance when the session app instance is cloned
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create a 
 new instance with the same configuration
 
+<div class="max-w-65">
+
 ![SSH Session form](../../img/apps_ssh_session_wizard.png#light-mode-only)
 ![SSH Session form](../../img/apps_ssh_session_wizard_dark.png#dark-mode-only)
+
+</div>

docs/webapp/applications/apps_task_scheduler.md

@@ -33,9 +33,12 @@ times.
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create 
   a new instance with the same configuration 
 
+<div class="max-w-65">
+
 ![TaskScheduler instance launch form](../../img/apps_taskscheduler_wizard.png#light-mode-only)
 ![TaskScheduler instance launch form](../../img/apps_taskscheduler_wizard_dark.png#dark-mode-only)
 
+</div>
  
 ## Dashboard
 

docs/webapp/applications/apps_trigger_manager.md

@@ -52,9 +52,13 @@ The app monitors your workspace for trigger events and will launch copies of the
 * **Export Configuration** - Export the app instance configuration as a JSON file, which you can later import to create 
   a new instance with the same configuration
 
+<div class="max-w-65">
+
 ![Trigger manager instance launch form](../../img/apps_trigger_manager_wizard.png#light-mode-only)
 ![Trigger manager instance launch form](../../img/apps_trigger_manager_wizard_dark.png#dark-mode-only)
 
+</div>
+
 ## Dashboard 
 
 The Trigger Manager app instance's dashboard displays its console log. The log shows the instance's activity: periodic 

docs/webapp/webapp_model_table.md

@@ -1,8 +1,8 @@
 ---
-title: The Model table
+title: The Model Table
 ---
 
-The model table is a [customizable](#customizing-the-models-table) list of models associated with the tasks in a project. From the model table,
+The model table is a [customizable](#customizing-the-model-table) list of models associated with the tasks in a project. From the model table,
 view model details, and modify, publish, archive, tag, and move models to other projects.
 
 View the model table in table view <img src="/docs/latest/icons/ico-table-view.svg" alt="Table view" className="icon size-md space-sm" /> 
@@ -64,7 +64,7 @@ Customize the table using any of the following:
 * Sort columns - By metadata, metric, ML framework, description, and last update elapsed time.
 
 :::note
-The following models-table customizations are saved on a **per-project** basis: 
+The following model-table customizations are saved on a **per-project** basis: 
 * Columns order
 * Column width
 * Active sort order

src/css/custom.css

@@ -82,6 +82,10 @@ html[data-theme="dark"] a:hover {
   max-width: 75%;
 }
 
+.max-w-65 {
+  max-width: 65%;
+}
+
 .max-w-50 {
   max-width: 50%;
 }