added view-section-width-auto css class and updated aefi dashboard vaccine info card style class

Author: obinna-h-n

sormas-ui/src/main/java/de/symeda/sormas/ui/dashboard/adverseeventsfollowingimmunization/components/AefiTypeStatisticsGroupComponent.java

@@ -49,7 +49,8 @@ public void update(Map<Vaccine, Map<AefiType, Long>> countsByVaccineData) {
 				//statisticsComponent.getHeading().getTitleLabel().setValue(entry.getKey().toString());
 				statisticsComponent.hideHeading();
 				statisticsComponent.update(entry.getValue());
-				statisticsComponent.addStyleNames(CssStyles.VIEW_SECTION, CssStyles.PADDING_X_8, CssStyles.HSPACE_RIGHT_3, CssStyles.VSPACE_4);
+				statisticsComponent
+					.addStyleNames(CssStyles.VIEW_SECTION_WIDTH_AUTO, CssStyles.PADDING_X_8, CssStyles.HSPACE_RIGHT_3, CssStyles.VSPACE_4);
 				componentMap.put(entry.getKey(), statisticsComponent);
 
 				addComponent(statisticsComponent);

sormas-ui/src/main/java/de/symeda/sormas/ui/utils/CssStyles.java

@@ -330,6 +330,7 @@ private CssStyles() {
 	public static final String GRID_ROW_GAP_1 = "grid-row-gap-1";
 	public static final String GIS_DASHBOARD_MAP_HEADER = "gis-dashboard-map-header";
 	public static final String GIS_DASHBOARD_MAP_FOOTER = "gis-dashboard-map-footer";
+	public static final String VIEW_SECTION_WIDTH_AUTO = "view-section-width-auto";
 
 	public static String buildVaadinStyle(String primaryStyle, String... styles) {
 		StringBuilder styleBuilder = new StringBuilder();

sormas-ui/src/main/webapp/VAADIN/themes/sormas/global.scss

@@ -382,6 +382,20 @@
     box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
   }
 
+  .view-section-width-auto{
+    width: auto !important;
+    padding: 5px 8px;
+    margin-left: 4px;
+    border-radius: 4px;
+    background-color: #ffffff;
+    border-width: 0;
+    border-style: solid;
+    border-color: #ffffff;
+    /*box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);*/
+    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
+    box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
+  }
+
   .page-title{
     font-size: 24px !important;
   }