fixes wso2/product-iots#1113

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.default.device.operation-bar/operation-bar.hbs

@@ -36,7 +36,7 @@
             }
         </style>
         {{#each control_operations}}
-            <a href="javascript:operationSelect('{{operation}}')">
+            <a class='operation-tile' href="javascript:operationSelect('{{operation}}')">
                 <i class="fw fw-service"></i>
                 <span>{{name}}</span>
             </a>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.operation-bar/operation-bar.hbs

@@ -35,7 +35,7 @@
             }
         </style>
         {{#each control_operations}}
-            <a href="javascript:operationSelect('{{operation}}')">
+            <a class='operation-tile' href="javascript:operationSelect('{{operation}}')">
                 {{#if iconFont}}
                     <i class="fw {{iconFont}}"></i>
                 {{else}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-desktop.css

@@ -2844,6 +2844,31 @@ a.ast-type-item:hover {
 }
 
 /* operations panel/board */
+.operation-tile{
+    width: 88px;
+    height: 100px;
+    background-color: #ebebeb;
+    float: left;
+    margin: 0px 10px 10px 0px;
+    cursor: pointer;
+    position: relative;
+}
+
+.operation-tile i{
+    padding: 15px 0px 0px 0px;
+    display: block;
+    min-height: 65px;
+    margin: -5px !important;
+    font-size: 36px !important;
+}
+
+.operation-tile span{
+    height: 35px;
+    line-height: 15px;
+    vertical-align: middle;
+    display: table-cell !important;
+    width: inherit;
+}
 .wr-operations-board {
     background: #fafafa;
     margin-bottom: 10px;